Document.elementFromPoint
Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it's a click
event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation for efficiency, but did you know you can identify elements by position on the page? Let's look at document.elementFromPoint
and document.elementsFromPoint
.
The document.elementFromPoint
method accepts x
and y
parameters to identify the top-most element at a point:
const element = document.elementFromPoint(100, 100);
//
If you want to know the entire element stack, you can use document.elementsFromPoint
:
const elements = document.elementsFromPoint(100, 100);
// [
The elementFromPoint
and elementsFromPoint
are really helpful for experiences where developers don't want to assign individual events. Games and entertainment sites could benefit from these functions. How would you use them?
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Multiple File Upload Input]()
More often than not, I find myself wanting to upload more than one file at a time. Having to use multiple "file" INPUT elements is annoying, slow, and inefficient. And if I hate them, I can't imagine how annoyed my users would be. Luckily Safari, Chrome...
![CSS Ellipsis Beginning of String]()
I was incredibly happy when CSS text-overflow: ellipsis
(married with fixed width
and overflow: hidden
was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation. CSS ellipsis was also very friendly to...