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

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


EDIT (see old answer below):

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

Why (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.

Usable code:

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 eventfunction 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 listenersif (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 listenersif (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);}

References:


Old answer:


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

Changing the original code to the following fixed our problem for chrome:

note: using this is not recommended since we can not deregister the listeners like this, see new example below.

document.getElementById("some-id").addEventListener('pointerdown', function(ev) {    o.clickDown(ev);}, false);document.getElementById("some-id").addEventListener('pointerup', function(ev) {    o.clickUp(ev);}, false);

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


To add to @WouterCoebergh solution. You must remember to add a fallback for the old event. This can be done by the following, taken from the same[1] source.

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