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 模式下）

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

此致

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.

可用代码：

要为 "same" 事件添加不同的事件侦听器，请使用以下代码：

// 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

Answer 2

添加到@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 Developers Blog

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

Chrome mousedown and mouseup events no longer working, other browsers are fine

javascript

google-chrome

mouseevent