我正在尝试制作一个具有背景和内容 div 的页面,一个与另一个重叠。具有“内容”类的 div 接收悬停事件,但是具有“背景”类的 div 什么也接收不到。我不会以任何方式主动破坏 js 中的事件。
.container {
height: 100%;
width: 100%;
opacity: 1;
}
.background {
height: 100%;
width: 100%;
position: absolute;
}
.content {
height: 100%;
width: 100%;
position: absolute;
}
<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
<!-- PANELS -->
<div class="facePanel" onmouseover="hoveringFacePanel(this)" onmouseleave="hoveringFacePanelOff(this)">
<img class="imageShown" src="https://i.pinimg.com/736x/70/d4/22/70d422d5972596f603a94c0faf24a43d--advertising-design-advertising-campaign.jpg" />
<img src="https://apple.insidercdn.com/gallery/21413-24435-Screenshot_1-l.jpg" class="imageShown" />
</div>
<!-- PANELS -->
</div>
</div>
fiddle :https://jsfiddle.net/6ardv95r/
更新:
提出了事件的冒泡性质,但这并没有回答为什么即使将 html 变成这样,这种行为仍然会发生:
<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
</div>
</div>
在这种情况下,内容类不会捕获任何悬停事件,但仍然没有事件触发背景类。删除内容类后,背景类按预期工作。
最佳答案
浏览器事件通过称为“冒泡”的过程工作 - 它们从最具体的标记开始,然后沿着树向上移动(从子到父再到祖父,等等)直到它们到达根标记(通常 < html>).
在您的情况下,mouseover 和 mouseout 事件在“content”div 内触发并冒泡,但它们不包含在“background”div 中就 DOM 树而言,即使如果它们包含在视觉上(内容矩形被绘制为背景矩形“内部”)。
在这种情况下,“content”div 出现在“background”div 之后,因此它呈现在“顶部”并获取所有事件,而“background”则没有。如果您希望背景也获得事件,请将“内容”div 放在“背景”div 中。
更多关于事件冒泡的信息:https://javascript.info/bubbling-and-capturing
关于javascript - 所有 div 都不会触发悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46309254/