截至今天(或昨天,当时没有注意到),
mousedown
和mouseup
活动不再起作用。我使用的是 Chrome 版本 55.0.2883.95(64 位)。 Safari 和 FireFox 工作正常(我使用的是 Mac 电脑)。
这是代码:
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 模式下)
编辑:更改选项卡后或调整窗口大小时,事件似乎会持续一段时间。然后他们又停下来了..
问候
编辑(请参阅下面的旧答案):
Chrome 从 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
if (isEventSupported("onpointerdown")) {
domElement.addEventListener("pointerdown", onPointerDown, false);
domElement.addEventListener("pointermove", onPointerHover, false);
domElement.addEventListener("pointermove", onPointerMove, false);
domElement.addEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
domElement.addEventListener("touchstart", onPointerDown, false);
domElement.addEventListener("touchmove", onPointerHover, false);
domElement.addEventListener("touchmove", onPointerMove, false);
domElement.addEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
domElement.addEventListener("mousedown", onPointerDown, false);
domElement.addEventListener("mousemove", onPointerHover, false);
domElement.addEventListener("mousemove", onPointerMove, false);
domElement.addEventListener("mouseup", onPointerUp, false);
}
// Remove event listeners
if (isEventSupported("onpointerdown")) {
domElement.removeEventListener("pointerdown", onPointerDown, false);
domElement.removeEventListener("pointermove", onPointerHover, false);
domElement.removeEventListener("pointermove", onPointerMove, false);
domElement.removeEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
domElement.removeEventListener("touchstart", onPointerDown, false);
domElement.removeEventListener("touchmove", onPointerHover, false);
domElement.removeEventListener("touchmove", onPointerMove, false);
domElement.removeEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
domElement.removeEventListener("mousedown", onPointerDown, false);
domElement.removeEventListener("mousemove", onPointerHover, false);
domElement.removeEventListener("mousemove", onPointerMove, false);
domElement.removeEventListener("mouseup", onPointerUp, false);
}
参考资料:
旧答案:
看起来 chrome 放弃了鼠标事件,转而使用 55 及更高版本的指针事件。
将原始代码更改为以下内容解决了 chrome 的问题:
注意:不建议使用此方法,因为我们无法像这样取消注册侦听器,请参阅下面的新示例。
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
添加到@WouterCoebergh 解决方案。您必须记住为旧事件添加后备。这可以通过以下方法来完成,取自相同的[1]来源。
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 开发者博客