检查鼠标是不是在div内

Posted 2023-02-22

【中文标题】检查鼠标是不是在div内

【英文标题】：Check if mouse is inside div检查鼠标是否在div内

【发布时间】：2016-08-14 12:18:27

【问题描述】：

我想使用 if 语句来检查鼠标是否在某个 div 内，如下所示：

if ( mouse is inside #element ) 
 // do something
 else 
 return;

这将导致函数在鼠标在#element 内时启动，并在鼠标在#element 外时停止。

【问题讨论】：

为什么不将事件处理程序挂钩到mouseenter/mouseover 以获得您需要的元素？

您可以使用getElementFromPoint() 来完成此操作，但直接挂钩到元素上的事件会更可靠且更好地实践 IMO。

【参考方案1】：

您可以注册 jQuery 处理程序：

var isOnDiv = false;
$(yourDiv).mouseenter(function()isOnDiv=true;);
$(yourDiv).mouseleave(function()isOnDiv=false;);

没有 jQuery 替代方案：

document.getElementById("element").addEventListener("mouseenter", function(  ) isOnDiv=true;);
document.getElementById("element").addEventListener("mouseout", function(  ) isOnDiv=false;);

还有其他地方：

if ( isOnDiv===true ) 
 // do something
 else 
 return;

【讨论】：

谢谢！这就是我一直在寻找的。愚蠢的是我自己想不到这一点

这依赖于触发这些事件的触发，当z平面上有重叠元素时这是不可靠的。

如果另一个元素直接定位在您正在测试的元素上，这将失败。

【参考方案2】：

嗯，这就是事件的用途。只需将事件侦听器附加到您要监视的 div。

var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function()
  // stuff to do when the mouse enters this div
, false);

如果你想用数学来做，你仍然需要在父元素或其他东西上有一个事件，以便能够获取鼠标坐标，然后将其存储在一个事件对象中，该对象传递给打回来。

var body = document.getElementsByTagName('body');
var divRect = document.getElementById('myDiv').getBoundingClientRect();
body.addEventListener('mousemove', function(event)
  if (event.clientX >= divRect.left && event.clientX <= divRect.right &&
      event.clientY >= divRect.top && event.clientY <= divRect.bottom) 
      // Mouse is inside element.
    
, false);

但最好使用上面的方法。

【讨论】：

该死的，10 分钟的调试和搞砸，伙计！应该是event.clientY >= divRect.top

大声笑，不，最后一部分应该像event.clientY <= divRect.bottom

【参考方案3】：

你可以使用这个：

var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) 
    //Mouse is inside element
 else 
    //Mouse is outside element

---

改进使用 cmets

const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) 
    //Mouse is inside element
 else 
    //Mouse is outside element

【讨论】：

在现代浏览器中，你可以这样做element.matches(':hover')

嗨，聪明的解决方案。

非常聪明:-)

对于 jquery，它是 $(element).is(':hover')

非常聪明和简单的解决方案。神奇地工作

【参考方案4】：

$("div").mouseover(function()
  //here your stuff so simple.. 
);

你可以这样做

var flag = false;
$("div").mouseover(function()
    flag = true;
    testing();
);
$("div").mouseout(function()
    flag = false;
    testing();
);

function testing()
    if(flag)
        //mouse hover
    else
        //mouse out
    

【讨论】：

我想在 if 语句中使用它，而不是这样。以为我很清楚。