子元素的 JavaScript 鼠标悬停/鼠标退出问题
JavaScript mouseover/mouseout issue with child element
我有这个小问题,我请求你的帮助。我有一个 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>
如您所见,该图像是 div 的子级。我希望只有当我离开div时,孩子才会消失。然而,当我将鼠标移到图像上时,似乎调用了 MyFuncOut(( 函数(因为我想,我通过将鼠标悬停在图像上来离开div(。我不希望这种情况发生。我希望MyFuncOut((函数仅在我离开div区域时才被调用。
我不知道当您将鼠标移到子控件上时,它是父项调用 mouseout 事件(即使我在子控件上,我仍然在父控件上(。我被困在这种境地上,我需要你的一些好建议。谢谢!
变化
好的,当我"鼠标退出"孩子时,事件冒泡不会将"mouseout"事件发送给父级。当我"鼠标悬停"孩子时,它也不会将"鼠标悬停"事件发送给父级。那不是我需要的。我需要在"鼠标悬停"子级时不发送父级的"mouseout"事件。明白了吗?例如,当我不希望将子项上的单击事件传播到父级时,事件冒泡很有用,但这不是我的情况。奇怪的是,我在同一个父级中还有其他元素,当我"鼠标悬停"它们时,它们不会触发父级的"mouseout"事件。
使用 jquery 中可用的 "mouseenter" 和 "mouseleave" 事件,下面是下面的代码,
$(document).ready(function () {
$("#parent").mouseenter(function () {
$("#child").show();
});
$("#parent").mouseleave(function () {
$("#child").hide();
});
});
以上是附加一个事件,
<div id="parent">
<img id="child" src="button.png" style="display:none;" />
</div>
您可以使用下面的解决方案,它是纯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);
}
}
我希望它有所帮助。
只需在 MyFuncOut 函数中添加一个 if 语句,该语句检查目标不是图像
if (event.target !== imageNode) {
imageNode.style.display = 'none'
}
我也遇到了这个问题,无法让它工作。这就是我所做的。它要容易得多,而且不是JavaScript,所以它更快,不能关闭。
div.container {
opacity:0.0;
filter:alpha(opacity="00");
}
div.container:hover {
opacity:1.0;
filter:alpha(opacity="100");
}
您甚至可以添加 CSS3 过渡以实现不透明度,使其感觉更流畅。
只需设置 css 的子元素 pointer-event:none;请参阅示例:
#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>
- 鼠标退出时恢复功能
- 鼠标退出并单击
- 使用 CSS 对鼠标悬停和鼠标退出没有过渡影响
- 如何在鼠标悬停和鼠标退出时制作此自定义引导下拉效果
- 如何在鼠标退出事件完成之前强制鼠标悬停事件触发
- 鼠标退出事件不会在 IE 8 中触发
- 分机 4 鼠标悬停、鼠标退出和下拉菜单的问题
- 鼠标退出和鼠标悬停事件在 Chrome 39 中未正确触发
- 在鼠标退出后,JQuery 无法将某些内容返回到其原始位置
- jQuery悬停或JavaScript鼠标退出事件,用于菜单“登录”
- 子元素的 JavaScript 鼠标悬停/鼠标退出问题
- 如何仅拦截顶级标记的鼠标退出事件
- 在 iPad 上触发悬停/鼠标退出/模糊
- 鼠标退出事件未在拉斐尔.js中触发
- 如何通过按钮单击和鼠标悬停/鼠标退出显示和隐藏节点文本?D3/JS.
- jQuery手风琴鼠标悬停和鼠标退出垂直菜单的导航
- 如果在鼠标悬停事件中触发了鼠标关闭,则立即返回,并且不执行链接的鼠标退出事件
- 手风琴中的鼠标悬停和鼠标退出
- 在鼠标退出父 DIV - AngularJs 时隐藏子元素
- 打开图层如何仅在鼠标悬停时显示多边形,并在鼠标退出时隐藏多边形