检查鼠标是否在div内

Question

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

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

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

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

Answer 2

您只需使用这个：

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
}

Answer 3

嗯，这就是活动的目的。只需将事件侦听器附加到您要监视的 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 4

$('#my_element').hover(function() {
//do something
}, function() { //else
//do something
});

Answer 5

您可以使用

document.elementFromPoint

或

document.elementsFromPoint

来获取鼠标/手指下的元素，即使这些元素不侦听 DOM 树中的事件。

const element = /* some element or window */;
element.addEventListener('pointermove', ev=>{
  const viewportX = ev.clientX
  const viewportY = ev.clientY
  // Element[]
  const hoveredElements = document.elementsFromPoint(viewportX,viewportY)
})

Answer 6

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