javascript - MouseOver 不会在重叠的 div 上冒泡吗？

Question

使用 jQuery 2.1、Meyer 的 2.0 CSS reset script ，针对 IE9+ 和现代浏览器。

我制作了两个重叠的 div。我正在监听它们两者上的 mouseover 和 mouseout 事件。 fiddle :http://jsfiddle.net/vbkjL/1/

预期行为:鼠标悬停事件在两个 div 上触发。

实际行为:鼠标悬停事件仅在顶部 div 上触发。

如何让 mouseover 事件冒泡到底部 div？

HTML

<div id="container">
    <div id="top"></div>
    <div id="below"></div>
</div>

jQuery

 $("#top")
     .mouseover(function () {
     console.log("top");
 })
     .mouseout(function () {
     console.log("top out");
 });

 $("#below")
     .mouseover(function () {
     console.log("bottom");
 })
     .mouseout(function () {
     console.log("bottom out");
 });

CSS

#top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px red solid;
}
#below {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1px blue solid;
}

Answer 1

如果你想让 #below 上的 mouseover 触发 #top 的鼠标悬停，请制作 #below #top 的子级。

<div id="container">
    <div id="top">
        <div id="below"></div>
    </div>
</div>

在您当前的 HTML 中，您的两个 div 之间没有冒泡或捕获的关系，因为它们没有嵌套。

冒泡提醒/来自Quirksmode :

Event capturing

When you use event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

the event handler of element1 fires first, the event handler of element2 fires last.

Event bubbling

When you use event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

the event handler of element2 fires first, the event handler of element1 fires last.

这是一个 demo ，如果我误解了你，请告诉我。