javascript - Chrome mousedown 和 mouseup 事件不再有效，其他浏览器正常

Question

截至今天(或昨天，当时没注意到)，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 在注册事件时也不会发出任何警告。 Touchdown 和 touch up 事件似乎也失败了(在开发者工具中的模拟 iPad 模式下)

编辑:更改选项卡后或调整窗口大小时，事件似乎持续了一小会儿。然后他们又停下来..

问候

Answer 1

编辑(见下面的旧答案):

Chrome 在 55 及更高版本中放弃了鼠标事件，转而支持指针事件。

为什么(W3C):

Today, most [HTML5] content is used with and/or designed for mouse input. Those that handle input in a custom manner typically code to [DOM-LEVEL-3-EVENTS] Mouse Events. Newer computing devices today, however, incorporate other forms of input, including touchscreens, pen input, etc. Event types have been proposed for handling each of these forms of input individually. However, that approach often incurs unnecessary duplication of logic and event handling overhead when adding support for a new input type. This often creates a compatibility problem when content is written with only one device type in mind. Additionally, for compatibility with existing mouse-based content, most user agents fire Mouse Events for all input types. This makes it ambiguous whether a Mouse Event represents an actual mouse device or is being produced from another input type for compatibility, which makes it hard to code to both device types simultaneously.

可用代码:

要为“同一”事件添加不同的事件监听器，请使用以下代码:

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

引用资料:

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
• https://developers.google.com/web/updates/2016/10/pointer-events

---

旧答案:

---

从 55 及更高版本开始，chrome 似乎放弃了鼠标事件，转而支持指针事件。

将原始代码更改为以下内容解决了 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