檢查鼠標是否在 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

嗯，這就是事件的用途。 只需將事件偵聽器附加到要監視的 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

簡單地你可以使用這個：

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