)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

elementUnderPoint and elementsUnderPoint

  1. document.addEventListener('mousemove', e => {
  2.   const el = document.elementFromPoint(e.clientX, e.clientY);
  3.  
  4.   // msElementsFromPoint for old IE versions (which will thankfully be gone soon)
  5.   const els = document.elementsFromPoint(e.clientX, e.clientY);
  6.   if (el != null) { 
  7.     console.log(
  8.       el.className, 
  9.       els
  10.     )
  11.  
  12.     el.style.border = '1px solid white';
  13.   }
  14. });
  15.  
  16. // prevent scrolling
  17. document.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
  18.  
  19. // hardcoded for clarity
  20. document.addEventListener('touchmove', e => {
  21.   const x = e.touches[0].clientX;
  22.   const y = e.touches[0].clientY;
  23.   const el = document.elementFromPoint(x, y);
  24.   const els = document.elementsFromPoint(x, y);
  25.  
  26.   if (el != null) { 
  27.     console.log(
  28.       el.className,
  29.       els
  30.     )
  31.     el.style.border = '1px solid white';
  32.   }
  33. });
  34.  
  35. Object.assign(document.body.style, {
  36.   background: '#000', 
  37.   margin: 0
  38. });
  39.  
  40. // put some boxes on the page
  41. for (let i = 0; i < 200; i++) { 
  42.   const size = 10 + Math.random() * 80;
  43.   const halfSize = size / 2;
  44.   const x = Math.random() * 120 - 10;
  45.   const y = Math.random() * 120 - 10;
  46.   const rot = x * 3 + Math.random() * 90 - 45;
  47.   const col = `hsl(${rot}, 50%, 50%)`;
  48.   document.body.innerHTML += `
  49.     <div class="box box-${i}" 
  50.       style="
  51.         transform: rotate(${rot}deg);
  52.         position: absolute;
  53.         background: ${col};
  54.         width: ${size}px; 
  55.         height: ${size}px;
  56.         left: ${x}%;
  57.         top: ${y}%;
  58.       "></div>`;
  59. }

Obtain the element or elements underneath the mouse or touch point. Open your dev console to see the results.

// dom // javascript // ui
snippet.zone ~ 2021-22 /// {s/z}