在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

我注意到，在mousedown pr mouseup之后， mousemove同时或在非常短的距离（10毫秒）内发射。

因此，可能的工作是在mousemove上使用event.timeStamp进行比较。

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

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

这两种解决方案都只是解决这个Chrome Bug的问题。

基于timeStamp的解决方案：

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>

Answer 2

我也遇到过这个问题。 上面的解决方案对我来说太过分了。 我不确定我的解决方案是否适用于所有浏览器，但我可以确认它在我当前运行的chrome版本中有效：版本48.0.2564.109 m

svg.element.addEventListener('mousemove', mouseMoved);
svg.element.addEventListener('mousedown', mouseDown);

var mouseDownTriggered = false;

function mouseDown(evt)
{
    console.log('mouse down');
    mouseDownTriggered = true;
}

function mouseMoved(evt)
{
    if (mouseDownTriggered)
    {
        mouseDownTriggered = false
    }
    else
    {
        console.log('mouse moved');
    }
}

我注意到当你鼠标按下时，顺序总是鼠标（向下 - >向上 - >移动）。 所以我只是将鼠标向下标记并让鼠标移动吸收呼叫。