Javascript 检查鼠标是否在 div 内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36767196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if mouse is inside div
提问by Maarten Wolfsen
I want to use an if statement to check if the mouse is inside a certain div, something like this:
我想使用 if 语句来检查鼠标是否在某个 div 内，如下所示：
if ( mouse is inside #element ) {
// do something
} else {
return;
}
This will result in the function to start when the mouse is inside #element, and stops when the mouse is outside #element.
这将导致该函数在鼠标位于 #element 内部时启动，并在鼠标位于 #element 外部时停止。
回答by GMchris
Well, that's kinda of what events are for. Simply attach an event listener to the div you want to monitor.
嗯，这就是事件的用途。只需将事件侦听器附加到要监视的 div。
var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
// stuff to do when the mouse enters this div
}, false);
If you want to do it using math, you still need to have an event on a parent element or something, to be able to get the mouse coordinates, which will then be stored in an event object, which is passed to the callback.
如果你想用数学来做，你仍然需要在父元素或其他东西上有一个事件，以便能够获取鼠标坐标，然后将其存储在一个事件对象中，该对象传递给回调。
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);
But it's best to use the above method.
但是最好使用上面的方法。
回答by or hor
you can register jQuery handlers:
您可以注册 jQuery 处理程序：
var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});
no jQuery alternative:
没有 jQuery 替代品：
document.getElementById("element").addEventListener("mouseenter", function( ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function( ) {isOnDiv=false;});
and somewhereelse:
和其他地方：
if ( isOnDiv===true ) {
// do something
} else {
return;
}
回答by M. Feyz
simply you can use this:
简单地你可以使用这个：
var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
//Mouse is inside element
} else {
//Mouse is outside element
}
Improving using the comments
使用评论改进
const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) {
//Mouse is inside element
} else {
//Mouse is outside element
}
回答by Gautam Patadiya
$("div").mouseover(function(){
//here your stuff so simple..
});
You can do something like this
你可以做这样的事情
var flag = false;
$("div").mouseover(function(){
flag = true;
testing();
});
$("div").mouseout(function(){
flag = false;
testing();
});
function testing(){
if(flag){
//mouse hover
}else{
//mouse out
}
}
