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不会发出任何警告。触地得分和修饰事件似乎也失败了（在开发人员工具中模仿iPad模式）

编辑：在更改标签后，或在调整窗口大小时，事件似乎会持续一段时间。然后他们再次停止..

此致

Answer 1

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

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

为什么（W3C）：

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

可用代码：

要为“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事件不再有效，其他浏览器也没问题

2 个答案: