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?
![9 Mind-Blowing Canvas Demos]()
The <canvas>
element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![Creating the Treehouse Frog Animation]()
Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...
![Ana Tudor’s Favorite CodePen Demos]()
Cocoon
I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...