在Chrome中mousedown或mouseup后如何防止鼠标移动[Chrome中可能存在错误]？

Question

使用最新的Chrome,我注意到事件在鼠标停留在同一位置mousemove之后mousedown或之后都会触发.mouseup

我有这种奇怪的行为附加一个事件监听器document.documentElement.

最新的Firefox上的相同脚本工作正常,问题似乎只在Chrome上.

• 为什么这个事件会发生？
• 有没有合理的解决方案？

http://jsbin.com/cefoteleqo/1/

document.documentElement.addEventListener('mousedown', function(event){
    console.log('mousedown', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mouseup', function(event){
    console.log('mouseup', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mousemove', function(event){
    console.log('mousemove <<<<', event.pageX, event.pageY);  
}.bind(this));

问题出现在Win 8.1上:

• Chrome版本42.0.2311.135 m

• Chrome版本44.0.2398.0金丝雀(64位)

Answer 1

我注意到在pr发射mousemove后同时或在很短的距离（10 毫秒）内发射。mousedownmouseup

因此，一个可能的工作是使用event.timeStamponmousemove进行比较。

以下脚本检查mousemove事件是否“很快”触发，并相应地在控制台中打印结果。

mousemove另一种可能的解决方案是在执行cb for 时检查鼠标的位置。

这两种解决方案都只是解决此 Chrome Bug 的方法。

基于时间戳的解决方案：

http://jsbin.com/jedotomoxu/1/

基于鼠标位置的解决方案：

http://jsbin.com/dinororaju/1/

<script>
    var timeDownUp = null;
    function start() {
        document.documentElement.addEventListener('mousedown', function (event) {
            timeDownUp = new Date().getTime();
            console.log('mousedown', event.pageX, event.pageY, event.timeStamp);
        }.bind(this));
        document.documentElement.addEventListener('mouseup', function (event) {
            timeDownUp = new Date().getTime();
            console.log('mouseup', event.pageX, event.pageY, event.timeStamp);
        }.bind(this));
        document.documentElement.addEventListener('mousemove', function (event) {
            var timeMove = new Date().getTime();
            timeDownUp += 10;
            if (timeMove > timeDownUp) {
                console.log('mousemove', event.pageX, event.pageY, event.timeStamp);
                if (event.which === 1) {
                    console.log('mousemove DRAG', event.pageX, event.pageY, event.timeStamp);
                }
            } else {
                timeDownUp = null;
            }
        }.bind(this));
    }
</script>