关于chrome浏览器事件拖动的bug（首次点击的时候也触发move的事件）

在做R80web的时候出现一个奇怪的现象，chorme现在的版本还是存在，拖动事件有mousedown、mousemove、mouseup组成，但是首次click以及失去焦点再重新点击的时候同样会触发mousemove的事件

事件问题代码

$('#mydiv').on("mousedown",function(){
    console.log("this is mousedown event");
    $(document).on("mousemove",function(){
        console.log("this is mousemove event");
    });
    $(document).off("mouseup").on("mouseup",function(){
        console.log("this is mouseup event");
        $(document).off("mousemove")
    });
});

注：火狐版本的浏览器不会存在此问题

问题存在，但是也要解决，因为这样一来，如果页面元素上有其他的事件，就有可能会触发mousemove的事件

解决办法：

在mousedown下申明一个变量，记录鼠标的位置，然后再在mousemove里面同位置判断，如果相同说明是点击的事件，否则为move事件

代码：

$('#mydiv').on("mousedown",function(e){
    var m=e.clientX,n=e.clientY;
    console.log("this is mousedown event");
    $(document).on("mousemove",function(e){
        var mousemove = { x: e.clientX, y: e.clientY };
        //如果前后位置相同说明是点击事件，否则移动事件
    　　if (m !== mousemove.x || n !== mousemove.y) {
            console.log("this is mousemove event");
        }
    });
    $(document).off("mouseup").on("mouseup",function(){
        console.log("this is mouseup event");
        $(document).off("mousemove")
    });
});

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试chorme浏览器版本拖动问题</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div >
    <script>
        $(function(){
            //有问题的
            $('#mydiv').on("mousedown",function(){
                console.log("this is mousedown event");
                $(document).on("mousemove",function(){
                    console.log("this is mousemove event");
                });
                $(document).off("mouseup").on("mouseup",function(){
                    console.log("this is mouseup event");
                    $(document).off("mousemove")
                });
            });
            //ok的
            $('#mydiv').on("mousedown",function(e){
                var m=e.clientX,n=e.clientY;
                console.log("this is mousedown event");
                $(document).on("mousemove",function(e){
                    var mousemove = { x: e.clientX, y: e.clientY };
                    //如果前后位置相同说明是点击事件，否则移动事件
                　　if (m !== mousemove.x || n !== mousemove.y) {
                        console.log("this is mousemove event");
                    }
                });
                $(document).off("mouseup").on("mouseup",function(){
                    console.log("this is mouseup event");
                    $(document).off("mousemove")
                });
            });
        });
    </script>
</body>
</html>

View Code