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?
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![Create a Download Package Using MooTools Moousture]()
Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP.
The XHTML
We provide...
![:valid, :invalid, and :required CSS Pseudo Classes]()
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...