如何检测某个标签是否被悬停

Question

我在下面的另一篇文章中有这段代码。每当带有 id 的某个元素悬停在上面或没有悬停时，它都会向控制台发送一条消息。除了每次悬停某个标签时它都会向控制台发送一条消息，我怎么能做到这一点。

function isHover(e) {
 return (e.parentElement.querySelector(':hover') === e);
}


var myDiv = document.getElementById('mydiv');;
document.addEventListener('mousemove', function checkHover() {
 var hovered = isHover(myDiv);
 if (hovered !== checkHover.hovered) {
   console.log(hovered ? 'hovered' : 'not hovered');
   checkHover.hovered = hovered;
 }
});

--pure javascript to check if something has hover (without setting on mouseover/out)

Answer 1

像您正在做的那样将侦听器添加到文档中，但是在 mousemove 处理程序中，使用 .closest 来查看 target.target 或祖先是否与特定标签匹配。例如，对于divs：

document.addEventListener('mousemove', ({ target }) => {
  console.log(target.closest('div') ? 'div hovered' : 'no div hovered');
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>

如果你愿意，你可以分配给一个持久变量：

let hovered = false;
document.addEventListener('mousemove', ({ target }) => {
  hovered = Boolean(target.closest('div'));
  console.log(hovered ? 'div hovered' : 'no div hovered');
});
document.addEventListener('click', () => {
  console.log('currently:', hovered);
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>

您还可以将鼠标悬停在<input> 上：

let hovered = false;
document.addEventListener('mousemove', ({ target }) => {
  hovered = Boolean(target.closest('input'));
  console.log(hovered ? 'input hovered' : 'no input hovered');
});
document.addEventListener('click', () => {
  console.log('currently:', hovered);
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>
<input>