子元素的 JavaScript 鼠标悬停/鼠标移出问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10618001/
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
JavaScript mouseover/mouseout issue with child element
提问by ali
I have this little problem and I am requesting for your help. I have a divelement, inside which I have an imgelement, like this
我有这个小问题，我请求你的帮助。我有一个div元素，里面有一个img元素，就像这样
<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
<img id="child" src="button.png" style="visibility: hidden" />
</div>
<script type="text/javascript">
function MyFuncHover() {
// Here I have some code that makes the "child" visible
}
function MyFuncOut() {
// Here I have some code that makes the "child" invisible again
}
</script>
As you, see, the image is a child of the div. I want that only when I leave the div, the child to disappear. Yet, it looks like when I move the mouse over the image, the MyFuncOut()function is called (because, I suppose, I leave the div by hovering the image). I don't want that to happen. I want the MyFuncOut()function to be called only when I leave the divarea.
如您所见，图像是div的子元素。我希望只有当我离开div 时，孩子才会消失。然而，看起来当我将鼠标移到图像上时，调用了MyFuncOut()函数（因为，我想，我通过悬停图像离开了 div）。我不希望这种情况发生。我希望MyFuncOut()函数仅在我离开div区域时被调用。
I didn't know that when you move your mouse over a child control, it's parent calls the mouseout event (even if I am over the child, I am still over the parent, too). I am trapped into this and I need a little of your good advice. Thanks!
我不知道当您将鼠标移到子控件上时，父控件会调用 mouseout 事件（即使我在子控件上，我仍然在父控件上）。我陷入了这个困境，我需要你的一些好建议。谢谢！
CHANGES
变化
O.K. Event bubbling will not send the "mouseout" event to the parent when I "mouseout" the child. It also won't send the "mouseover" event to the parent when I "mouseover" the child. That's not what I need. I need the "mouseout" event of the parent to not be sent when I "mouseover" the child. Get it? Event bubbling is useful when I don't want, for example, a click event on the child to be propagated to the parent, but this is not my case. What is weird is that I have other elements inside the same parent that don't fire the "mouseout" event of the parent when I "mouseover" them.
好的，当我“鼠标移出”孩子时，事件冒泡不会将“鼠标移出”事件发送给父母。当我“鼠标悬停”孩子时，它也不会将“鼠标悬停”事件发送给父母。那不是我需要的。当我“鼠标悬停”孩子时，我需要不发送父母的“mouseout”事件。得到它？例如，当我不希望将子级上的单击事件传播到父级时，事件冒泡很有用，但这不是我的情况。奇怪的是，我在同一个父元素中有其他元素，当我“鼠标悬停”它们时，它们不会触发父元素的“鼠标移出”事件。
回答by Vishal Gowda
you can use "mouseenter" and "mouseleave" events available in jquery, here is the below code,
您可以使用 jquery 中可用的“mouseenter”和“mouseleave”事件，这是以下代码，
$(document).ready(function () {
$("#parent").mouseenter(function () {
$("#child").show();
});
$("#parent").mouseleave(function () {
$("#child").hide();
});
});
above is to attach an event,
上面是附加一个事件，
<div id="parent">
<img id="child" src="button.png" style="display:none;" />
</div>
回答by Pedro Alvares
You can use the solution below, which it's pure javascript and I used with success.
您可以使用下面的解决方案，它是纯 javascript，我成功地使用了它。
var container = document.getElementById("container");
var mouse = {x: 0, y: 0};
function mouseTracking(e) {
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY;
var containerRectangle = container.getBoundingClientRect();
if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) {
// Mouse is inside container.
} else {
// Mouse is outside container.
}
}
document.onmousemove = function () {
if (document.addEventListener) {
document.addEventListener('mousemove', function (e) {
mouseTracking(e);
}, false);
} else if (document.attachEvent) {
// For IE8 and earlier versions.
mouseTracking(window.event);
}
}
I hope it helps.
我希望它有帮助。
回答by Jake
Just add an if statement to your MyFuncOut function which checks the target is not the image
只需在 MyFuncOut 函数中添加一个 if 语句来检查目标不是图像
if (event.target !== imageNode) {
imageNode.style.display = 'none'
}
回答by Spencer May
I've had problems with this too and couldn't get it to work. This is what I did instead. It's much easier and isn't JavaScript so it's faster and can't be turned off.
我也遇到了这个问题，无法让它工作。这就是我所做的。它更容易，而且不是 JavaScript，因此速度更快且无法关闭。
div.container {
opacity:0.0;
filter:alpha(opacity="00");
}
div.container:hover {
opacity:1.0;
filter:alpha(opacity="100");
}
You can even add the CSS3 transition for opacity to give it a smoother feel to it.
您甚至可以为不透明度添加 CSS3 过渡，以使其感觉更平滑。
回答by Keyang
Simply set css of the child element pointer-event:none; See example:
只需设置子元素的 css 指针事件：无；见示例：
#parent {
width: 500px;
height: 500px;
border: 1px solid black;
}
#child {
width: 200px;
pointer-events: none; # this does the trick
}<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
<img id="child" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" />
</div>
<script type="text/javascript">
function MyFuncHover() {
console.log("mouse over")
}
function MyFuncOut() {
console.log("mouse out")
}
</script>