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不会发出任何警告.触地得分和补足事件似乎也失败了(在开发人员工具中模拟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);
}

参考文献:

• 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及更高版本的指针事件.

将原始代码更改为以下内容修复了我们的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