Menu
If you use document.elementFromPoint(x,y), and more than one element is located at the provided coordinates, it is supposed to return the topmost element (topmost in the visual stacking order, not the source code).
If the topmost element has pointer-events: none set in CSS, document.elementFromPoint does not see it. This fiddle demonstrates the effect.
Is this intended behavior? It seems like the browser is firing a click event (a secret click event that doesn't fire attached click handlers or default behaviors) at the coordinates you provide to find the element. Is there any way to see how document.elementFromPoint is implemented in different browsers? It seems rather odd that a CSS property would effect the behavior of a completely unrelated DOM function.
I've only tested this in the latest Chrome. I'm certain every browser treats this differently. I'm mainly curious about webkit based browsers, but more info about other browsers is always welcome.
369
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
The elementsFromPoint() method of the Document interface returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport. It operates in a similar way to the elementFromPoint() method.
The elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).
The specs tell us the element is determined through hit testing, so Chrome seems to be behaving properly here. Other browsers might do it differently, but if they're following the specs then you should expect that pointer-events would prevent it from functioning.
Later on in the specs, it mentions that hit testing isn't clearly defined by the W3C at this time. However, it's probably safe to assume that they're using at least something similar to the common use of the term.
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
