javascript - 在 JavaScript 中确定鼠标指针位于哪个元素之上

Question

我想要一个函数来告诉我鼠标光标在哪个元素上。

因此，例如，如果用户的鼠标悬停在该文本区域上(id 为 wmd-input)，则调用 window.which_element_is_the_mouse_on() 在功能上等同于 $("#wmd-input")。

Answer 1

DEMO

有一个非常酷的函数叫做 document.elementFromPoint，它的功能听起来很像。

我们需要找到鼠标的 x 和 y 坐标，然后使用这些值调用它:

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