Determine which element the mouse pointer is on top of in JavaScript

by

DEMO

There’s a really cool function called document.elementFromPoint which does what it sounds like.

What we need is to find the x and y coords of the mouse and then call it using those values:

document.addEventListener('mousemove', e => {
  console.clear()
  console.log( document.elementFromPoint(e.clientX, e.clientY) )
}, {passive: true})
[class^='level']{
  width: 100px;
  height: 100px;
  padding: 15px;
  background: #00000033;
}
<div class="level-1">
  <div class="level-2">
    <div class="level-3">
      Hover
    </div>
  </div>
</div>

document.elementFromPoint

jQuery event object

More Related Contents:

  1. How do I set/unset a cookie with jQuery?
  2. Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
  3. Executing elements inserted with .innerHTML
  4. Difference between innerText, innerHTML and value?
  5. getElementsByTagName() equivalent for textNodes
  6. Event handlers inside a Javascript loop – need a closure?
  7. document.createElement(“script”) synchronously
  8. How To Wrap / Surround Highlighted Text With An Element
  9. Difference between DOM parentNode and parentElement
  10. How to access component methods from “outside” in ReactJS?
  11. How do I serialize a DOM to XML text, using JavaScript, in a cross browser way?
  12. Get the DOM path of the clicked
  13. Console shows error about Content Security policy and lots of failed GET requests
  14. How do you set the document title in React?
  15. Remove specific HTML tag with its content from javascript string
  16. Is it possible to programmatically catch all events on the page in the browser?
  17. how to compare two elements in jquery [duplicate]
  18. Is there any way to accelerate the mousemove event?
  19. How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?
  20. How to get object in WebGL 3d space from a mouse click coordinate
  21. Inject CSS stylesheet as string using Javascript
  22. JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure? [duplicate]
  23. Accessing a DOM object defined in an external SVG file
  24. How can I replace one class with another on all elements, using just the DOM?
  25. How to properly unload/destroy a VIDEO element
  26. How to get element by class name
  27. Test if an element can contain text
  28. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  29. Replacement for deprecated `keypress` DOM event
  30. Screen Coordinates of a element, via Javascript

Leave a Comment