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

Posted 2023-05-08

【中文标题】如何检测某个标签是不是被悬停

【英文标题】：How to detect if a certain tag is being hovered over如何检测某个标签是否被悬停

【发布时间】：2020-07-05 13:34:38

【问题描述】：

我在下面的另一篇文章中有这段代码。每当带有 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)

【问题讨论】：

您要定位哪个特定标签？

【参考方案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>

【讨论】：

那么如何将变量放入其中？例如：当 div 悬停时，ishovered 设置为 1，而当 ishovered 设置为 0 时，ishovered 设置为相反。

如果我的问题听起来有点愚蠢，我对此并不完全熟悉。

理想情况下，您根本不会使用持久变量 - 相反，您会将悬停在侦听器中的所有功能。如果悬停，则运行代码 A（无论它是什么），否则运行代码 B

好吧，我认为需要为某个东西设置一个变量，因为我的目标是制作一些类似的东西：如果点击正文：如果将鼠标悬停在输入上什么也不做；如果没有将鼠标悬停在输入上，则创建一个新输入。

好，然后用=赋值给一个变量