Chrome mousedown和mouseup事件不再有效，其他浏览器也没问题 [英] Chrome mousedown and mouseup events no longer working, other browsers are fine

问题描述

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

As of today (or yesterday, didn't notice it then), mousedown and mouseup events are no longer working. I am on Chrome Version 55.0.2883.95 (64-bit). Safari and FireFox are working fine (I am on a mac computer).

以下是代码：

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

Were there any API changes regarding mouse-events that we missed? Chrome does not throw any warning when registering the events either. Touchdown and touch up event seem to fail too (in emulated iPad mode in developer tools)

编辑：改变标签后或调整大小时窗口，这些事件似乎很快就会出现。然后他们再次停止..

Right after changing tab, or when resizing the window, the events seem to come through for a short while. Then they stop again..

问候

推荐答案

编辑（参见下面的旧答案）：

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

Chrome ditched mouse events in favour of pointer events from version 55 and up.

为什么（W3C）：

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

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.

可用代码：

添加不同的事件同一事件的监听器，使用以下代码：

To add different event listeners for the "same" event, use the following code:

// 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 /指针事件

• 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

旧答案：

看起来像Chrome丢弃的鼠标事件，转而支持版本55和up。

Looks like chrome ditched mouse events in favour of pointer events from version 55 and up.

将原始代码更改为以下内容修复了我们的chrome问题：

Changing the original code to the following fixed our problem for 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'

Note that if you have additional checks on the event type, like we did, the type also changed from 'mouseup' to 'pointerup' and from 'mousedown' to 'pointerdown'

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

You can read up on the update article here:

https://developers.google。 com / web / updates / 2016/10 /指针事件

这篇关于Chrome mousedown和mouseup事件不再有效，其他浏览器也没问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！