JavaScript解决鼠标拖拽元素触发点击事件的BUG - 途畔

一个完整的click事件是包含mousedown,mouseup.而拖拽事件包含下面三个事件：mousedown,mousemove,mouseup.所以我们在拖拽一个元素结束后，如果此元素上面绑定了点击事件就会同时触发元素的点击事件。

Drag-Conflicts-With-Click-1

方法

var fixdrag = document.querySelector('#a'); //#a是拖拽的元素
var isdown = false, ismove = false, timer = null;
fixdrag.onmousedown = function(){
    isdown = true;
    console.log("isdown: " + isdown);
    document.onmousemove = function(){
        if(isdown) {
        ismove = true;
        clearTimeout(timer);
        console.log("ismove: " + ismove);
        //鼠标拖拽事件执行函数
        };
    };
    document.onmouseup = function(){
        isdown = false;
        console.log("isdown: " + isdown);
        document.onmousemove = document.onmouseup = null;
        return false;
    };
    document.onclick = function () {
        //如果是鼠标拖拽事件就不触发点击后的处理了
        if(ismove) {
            timer = setTimeout(function(){
            ismove = false;
            },500);
            return false;
        };
    };
    return false;
};

Drag-Conflicts-With-Click-1

例子

<head>
<meta charset="utf-8">
<style>
body{
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}
#box{
    width:40px;
    height:40px;
    background: slateblue;
    position: absolute;
    left:0;
    top:0;
}
.active{
    width:40px;
    height:40px;
    background: slateblue;
    position: absolute;
    left:0;
    top:0;
    opacity:.5;
}
#a{
    margin: auto;
    height:80px;
    width:500px;
    background-color: green;
    overflow-x: scroll;
    overflow-y: hidden;
}
#b{
    height:80px;
    width:1000px;
    background-color: red;
}
.projList{
    width:100%;
    height:300px;
    overflow-x:auto;
}
</style>
</head>
<body>
    <div>
        <div id="a" class="projList">
            <div id="b">
                <a href="http://www.baidu.com">百度</a>aedad<a href="http://www.baidu.com">百度</a>asdadss<a href="http://www.baidu.com">百度</a>ssssssssssssssssssssssssssssssssssssssssaaaassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssyyyy
            </div>
        </div>
    </div>
<script>
var fixdrag = document.querySelector('#a'), ox;
var last_left = 0;
var isdown = false, ismove = false, timer = null;
fixdrag.onmousedown = function(e){
    isdown = true;
    console.log("isdown: " + isdown);
    e = e || window.event;
    if(last_left > 0 ){
        ox = last_left + e.clientX;
    }else{
        ox = e.clientX;
    };
    document.onmousemove = function(e){
        if(isdown) {
        ismove = true;
        clearTimeout(timer);
        console.log("ismove: " + ismove);
        e = e || window.event;
        if(fixdrag.scrollWidth-fixdrag.scrollLeft!==fixdrag.clientWidth){
            last_left = ox- e.clientX  ;
        };
        fixdrag.scrollLeft = ox - e.clientX ;
        };
    };
    document.onmouseup = function(){
        isdown = false;
        console.log("isdown: " + isdown);
        document.onmousemove = document.onmouseup = null;
        return false;
    };
    document.onclick = function () {
        if(ismove) {
            timer = setTimeout(function(){
            ismove = false;
            },500);
            console.log("ismove: " + ismove);
            return false;
        };
    };

    return false;
};
</script>
</body>