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 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);
}
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
