Question

使用最新的Chrome，我注意到事件mousemove会在mousedown或mouseup后触发，即使鼠标位于同一位置。< / p>

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

最新版Firefox上的相同脚本运行正常，仅在Chrome上出现问题。

为什么会发生此事件？
有合理的解决方案吗？

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 canary（64位）

Answer 1

我注意到mousemove在mousedown pr mouseup被解雇后同时或在非常短的距离（10毫秒）内发生event.timeStamp。

所以可能的工作是在mousemove上使用mousemove进行比较。

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

另一种可能的解决方案是在执行<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>的cb时检查鼠标的位置。

这两个解决方案只是解决这个Chrome Bug.

的问题

基于timeStamp的解决方案：

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

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

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

{{1}}

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');
    }
}

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

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

2 个答案: