检查鼠标是否在里面 div

Question

我想使用 if 语句来检查鼠标是否在某个 div 内，像这样：

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

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

Answer 1

$("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
    }
}

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

不过最好用上面的方法

Answer 3

您可以注册 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;
}

Answer 4

你可以简单地使用这个：

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
}

检查鼠标是否在里面 div

Check if mouse is inside div

javascript

jquery

if-statement

mouseover