javascript - 所有 div 都不会触发悬停事件

Question

我正在尝试制作一个具有背景和内容 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>

在这种情况下，内容类不会捕获任何悬停事件，但仍然没有事件触发背景类。删除内容类后，背景类按预期工作。

Answer 1

浏览器事件通过称为“冒泡”的过程工作 - 它们从最具体的标记开始，然后沿着树向上移动(从子到父再到祖父，等等)直到它们到达根标记(通常 < html>).

在您的情况下，mouseover 和 mouseout 事件在“content”div 内触发并冒泡，但它们不包含在“background”div 中就 DOM 树而言，即使如果它们包含在视觉上(内容矩形被绘制为背景矩形“内部”)。

在这种情况下，“content”div 出现在“background”div 之后，因此它呈现在“顶部”并获取所有事件，而“background”则没有。如果您希望背景也获得事件，请将“内容”div 放在“背景”div 中。

更多关于事件冒泡的信息:https://javascript.info/bubbling-and-capturing