Javascript 检查鼠标是否在div内

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

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

这将导致该函数在鼠标位于#元素内部时启动，在鼠标位于#元素外部时停止

你可以这样做

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

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

---

嗯，这就是活动的目的。只需将事件侦听器附加到要监视的div

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

如果您想使用math进行计算，您仍然需要在父元素上有一个事件或其他东西，以便能够获取鼠标坐标，然后将其存储在事件对象中，并将其传递给回调

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);

var body=document.getElementsByTagName（'body'）；
var divRect=document.getElementById（'myDiv'）.getBoundingClientRect（）；
body.addEventListener（'mousemove'，函数（事件）{
如果（event.clientX>=divRect.left&&event.clientX=divRect.top&&event.clientY，则可以注册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;
}

简单地说，您可以使用：

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


改进评论的使用

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

为什么不为您需要的元素将事件处理程序挂接到
mouseenter
/
mouseover
？您可以使用
getElementFromPoint（）实现
，但是在我看来，直接连接到元素上的事件会更可靠，更好地实践。我想在if语句中使用它，而不是像这样。我想我已经很清楚了。谢谢！这就是我要找的。愚蠢的是我自己想不到这一点。这依赖于那些事件的触发器，这不是rel当z平面上有重叠元素时，此选项不可用。如果另一个元素直接位于您要测试的元素上方，则此选项将失败。该死的，调试和拧紧10分钟，伙计！应该是
event.clientY>=divRect.top
lol，不，最后一部分应该像
event.clientY在现代浏览器中，您可以do
element.matches（':hover'）
Hi，聪明的解决方案。非常聪明：-）对于jquery，它是
$（element.is（':hover'）
非常聪明和简单的解决方案。神奇地工作
const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) {
    //Mouse is inside element
} else {
    //Mouse is outside element
}