0

When using a global mousemove event attached to the window object, the mouse coordinates are not available when the mouse moves over a disabled element. Disabled elements do not fire any events, presenting a problem.

Part of my application includes a free-transform tool which allows elements to be rotated, scaled, resized and dragged around the viewport (drag & drop). The flow of my app is broken if the mouse is moved over a disabled element while freely transforming an object, because suddenly the mouse coordinates are not available to my objects until the mouse leaves the element, giving a choppy / laggy feel and a poor user experience.

I've tried the readonly attribute instead. However, this is not a viable solution as it is only supported by two elements (input and textarea) source: https://www.w3.org/TR/html4/interact/forms.html#h-17.12 and has different behaviour.

Here's a Fiddle showing the choppy / laggy behaviour: https://jsfiddle.net/rmw9anLs/2/

I understand the element itself doesn't fire any events, but I'm not attaching any events to the disabled element. I would expect the window.mousemove event to fire regardless and don't understand why a disabled element on the page would interrupt a global event listener.

Aside from implementing a custom disabled feature using JavaScript, is there a way to get the mouse coordinates without having to account for the mouse being on top of disabled elements?

George
  • 3
  • 2
  • `don't understand why a disabled element on the page would interrupt a global event listener` That is because of [event bubbling](https://javascript.info/bubbling-and-capturing). If the propagation is stopped anywhere during bubbling or capturing then it will not propagate any further (duh.) – Wendelin Aug 22 '19 at 12:08
  • have look to this [answer](https://stackoverflow.com/a/32925830/7485705) – Mohamed Sa'ed Aug 22 '19 at 12:20

1 Answers1

0

You cannot, hence the disabled attribute has no effect, other than making your HTML invalid.

To stop the mouse event working, attach an event handler to the element using event.preventDefault() on it, check for a data-disabled attribute on the element in your existing click handlers or use pointer-events: none in a CSS class which you toggle on/off as needed. Also be aware that pointer-events is not well supported in IE <11

E.g: https://jsfiddle.net/x4nLu0a5/

raman
  • 960
  • 8
  • 18