Software

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.elementFromPoint(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?

  • Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick…

  • Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such…



Source link
Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button