Chrome mousedown和mouseup事件不再有效，其他浏览器都没有问题

截至今天（或昨天，当时没有注意到），mousedown和mouseup事件不再有效。我使用的是Chrome版本55.0.2883.95（64位）。 Safari和FireFox工作正常（我在一台Mac电脑上）。Chrome mousedown和mouseup事件不再有效，其他浏览器都没有问题

下面是代码：

document.getElementById("floorplan-backdrop-rect").addEventListener('mousedown', function(ev) { 
    o.clickDown(ev); 
}, false); 

document.getElementById("floorplan-backdrop-rect").addEventListener('mouseup', function(ev) { 
    o.clickUp(ev); 
}, false);

有没有关于我们错过了鼠标事件的任何API的变化？ Chrome在注册事件时也不会发出任何警告。接地和润色事件似乎辜负了（在iPad上仿真模式的开发人员工具）

编辑：改变标签，或调整窗口时刚过，该事件似乎来过一小会儿。然后，他们又停下..

问候

来源

2016-12-16 Wouter Coebergh

EDIT（见下面的旧答案）：

铬抛弃鼠标事件赞成指针事件的55及以上版本。

为什么（W3C）：

今天，大多数[HTML5]内容使用具有和/或设计用于鼠标输入。那些以自定义方式处理输入的代码通常编码为 [DOM-LEVEL-3-EVENTS]鼠标事件。然而，较新的计算设备然而包含其他形式的输入，包括触摸屏，输入笔等。已经提出事件类型来单独处理这些输入形式中的每一个。但是，当添加对新输入类型的支持时，该方法通常会导致不必要的逻辑和事件处理开销重复。考虑到只有一个设备类型的内容写入内容时，这通常会产生兼容性问题。此外，为了与现有的基于鼠标的内容兼容，大多数用户代理为所有输入类型激发鼠标事件。这使得鼠标事件代表实际鼠标设备或由另一种输入类型产生的兼容性模糊不清，这使得难以同时对两种设备类型进行编码。

可用代码：

要为 “同” 事件中添加不同的事件侦听器，使用下面的代码：

// Put these in seperate function instead of anonymous ones 
// since you will need them later to deregister the event 
function onPointerDown(event){ /** Do stuff here **/ } 
function onPointerHover(event){ /** Do stuff here **/ } 
function onPointerMove(event){ /** Do stuff here **/ } 
function onPointerUp(event){ /** Do stuff here **/ } 


// Add event listeners 
domElement.addEventListener("mousedown", onPointerDown); 
domElement.addEventListener("pointerdown", onPointerDown); 
domElement.addEventListener("touchstart", onPointerDown); 

domElement.addEventListener("mousemove", onPointerHover); 
domElement.addEventListener("pointermove", onPointerHover); 
domElement.addEventListener("touchmove", onPointerHover); 

domElement.addEventListener("mousemove", onPointerMove); 
domElement.addEventListener("pointermove", onPointerMove); 
domElement.addEventListener("touchmove", onPointerMove); 

domElement.addEventListener("mouseup", onPointerUp); 
domElement.addEventListener("pointerup", onPointerUp); 
domElement.addEventListener("touchend", onPointerUp); 


// Remove event listeners 
domElement.removeEventListener("mousedown", onPointerDown); 
domElement.removeEventListener("pointerdown", onPointerDown); 
domElement.removeEventListener("touchstart", onPointerDown); 

domElement.removeEventListener("mousemove", onPointerHover); 
domElement.removeEventListener("pointermove", onPointerHover); 
domElement.removeEventListener("touchmove", onPointerHover); 

domElement.removeEventListener("mousemove", onPointerMove); 
domElement.removeEventListener("pointermove", onPointerMove); 
domElement.removeEventListener("touchmove", onPointerMove); 

domElement.removeEventListener("mouseup", onPointerUp); 
domElement.removeEventListener("pointerup", onPointerUp); 
domElement.removeEventListener("touchend", onPointerUp);

参考文献：

老答案：

貌似铬抛弃鼠标事件赞成指针事件的55及以上版本。

改变原始代码以下固定我们的问题镀铬：

注：使用不建议这样做，因为我们不能注销听众喜欢这个，请参见下面的新范例。

document.getElementById("some-id").addEventListener('pointerdown', function(ev) { 
    o.clickDown(ev); 
}, false); 

document.getElementById("some-id").addEventListener('pointerup', function(ev) { 
    o.clickUp(ev); 
}, false);

请注意，如果您对事件类型额外的检查，像我们一样，类型也从'mouseup'改为'pointerup'和'mousedown'到'pointerdown'

您可以在这里的更新文章阅读起来：

https://developers.google.com/web/updates/2016/10/pointer-events

来源

2016-12-20 09:25:56

为了增加@WouterCoebergh解决方案。您必须记得为旧事件添加回退。这可以通过以下来完成，取自同一个来源。

var mousedownEvent = function(ev) { 
    o.clickDown(ev); 
} 

var elm = document.getElementById("floorplan-backdrop-rect"); 

if (window.PointerEvent) { 
    elm.addEventListener('pointerdown', mousedownEvent); 
} else { 
    elm.addEventListener('mousedown', mousedownEvent); 
}

[1]：Google Developers Blog

来源

2017-03-29 23:03:00 MrGrigri

Chrome mousedown和mouseup事件不再有效，其他浏览器都没有问题

回答

相关问题