检查鼠标是否在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。

标签： javascript jquery if-statement mouseover

【解决方案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 语句中使用它，而不是这样。以为我很清楚。