Created
November 1, 2013 13:25
-
-
Save oslego/7265412 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// returns a list of all elements under the cursor | |
// | |
function elementsFromPoint(x,y) { | |
var elements = [], previousPointerEvents = [], current, i, d; | |
// get all elements via elementFromPoint, and remove them from hit-testing in order | |
while ((current = document.elementFromPoint(x,y)) && elements.indexOf(current)===-1 && current != null) { | |
// push the element and its current style | |
elements.push(current); | |
previousPointerEvents.push({ | |
value: current.style.getPropertyValue('pointer-events'), | |
priority: current.style.getPropertyPriority('pointer-events') | |
}); | |
// add "pointer-events: none", to get to the underlying element | |
current.style.setProperty('pointer-events', 'none', 'important'); | |
} | |
// restore the previous pointer-events values | |
for(i = previousPointerEvents.length; d=previousPointerEvents[--i]; ) { | |
elements[i].style.setProperty('pointer-events', d.value?d.value:'', d.priority); | |
} | |
// return our results | |
return elements; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice way of emulating document.elementsFromPoint()
I'm not sure if you're aware of this, but pointer-events inheritance can cause issues with this approach.
In this example: https://jsbin.com/larukoxoqa/edit?html,css,js,output your approach misses the p tag with purple background, whereas document.elementsFromPoint() does find the p. Since the div is found first, pointer-events: 'none' is set and this will also affect the child p, which is positioned below the div. The result is output by console.log()
From: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
It seems the solution is to explicitly set pointer-events: 'auto' on all elements on the page, so they won't inherit from their parents. With a css rule * { pointer-events:auto} the p tag is not missed.