Replacing element.setCapture element in Chrome?

Question

I need to capture mouse events after a mousedown event on an element.

In MDN setCapture , I don’t see mention of setCapture() not executing in Chrome, but when I try to run the provided example, it creates an Uncaugt TypeError because e.target.setCapture is basically undefined in Chrome.

 function init() { var btn = document.getElementById("myButton"); btn.addEventListener("mousedown", mouseDown, false); btn.addEventListener("mouseup", mouseUp, false); } function mouseDown(e) { e.target.setCapture(); e.target.addEventListener("mousemove", mouseMoved, false); } function mouseUp(e) { e.target.removeEventListener("mousemove", mouseMoved, false); } function mouseMoved(e) { var output = document.getElementById("output"); output.innerHTML = "Position: " + e.clientX + ", " + e.clientY; } 

What is the equivalent API in Chrome?

Answer 1

I finally came up with a complete ES2015 solution (explained on my blog ) that captures mouse events and effectively disables the parasitic cursor and the cursor pointer changes when the mouse button is clicked.

Call captureMouseEvents(e) from the event handler associated with the mousedown event:

 const EventListenerMode = {capture: true}; function preventGlobalMouseEvents () { document.body.style['pointer-events'] = 'none'; } function restoreGlobalMouseEvents () { document.body.style['pointer-events'] = 'auto'; } function mousemoveListener (e) { e.stopPropagation (); // do whatever is needed while the user is moving the cursor around } function mouseupListener (e) { restoreGlobalMouseEvents (); document.removeEventListener ('mouseup', mouseupListener, EventListenerMode); document.removeEventListener ('mousemove', mousemoveListener, EventListenerMode); e.stopPropagation (); } function captureMouseEvents (e) { preventGlobalMouseEvents (); document.addEventListener ('mouseup', mouseupListener, EventListenerMode); document.addEventListener ('mousemove', mousemoveListener, EventListenerMode); e.preventDefault (); e.stopPropagation (); } 

Note that the pointer-events: none style prevents any component from receiving mouse events.

Answer 2

See issue here, noting the fact that setCapture not supported. There is a recommended solution at the bottom of the stream that may come in handy.