悬停事件会冒泡吗？答案

【问题标题】：Do hover events bubble?悬停事件会冒泡吗？
【发布时间】：2011-07-12 08:50:47
【问题描述】：

我的父 DIV 将有许多可点击的子元素，因此使用事件委托我试图在父 DIV 冒泡时捕获子元素的单击和悬停事件。

现在单击事件可以正常显示，但我似乎无法捕获悬停事件。有人知道为什么吗？

请不要告诉我悬停事件没有冒泡:)

HTML：

<div id="theParent">

    <a href="#">Clicked 1</a>
    <a href="#">Clicked 2</a>
    <a href="#">Clicked 3</a>
    <a href="#">Clicked 4</a>
    <a href="#">Clicked 5</a>

</div>

jQuery:

$('#theParent').click(captureEvent).hover(captureEvent,captureEvent);

var captureEvent = function(e){

    console.log(e.target);

};

【问题讨论】：

不会将鼠标悬停在a 标签上意味着您没有悬停在div 上吗？因为它不会冒泡，所以您需要检查 div 或其任何子项是否悬停，一个简单的递归函数就可以很好地解决问题。我将此作为评论发布，因为我不确定这是您问题的答案（因为我不明白这个问题）
我原以为如果您将鼠标悬停在 A 标签上，那么您也将鼠标悬停在父 DIV 上。
@mazzzzz 根据this mouseenter 和 mouseleave 事件不会冒泡，因为 jQuery 的悬停是 mouseenter 和 mouseleave 的快捷方式，那么我可以看到为什么悬停不会冒泡/触发父母。
是的，把它们想象成完全不同的盒子，别想嵌套，这样更有意义。

标签： jquery click hover delegation event-bubbling

【解决方案1】：

在使用之前尝试定义captureEvent — 似乎可行：http://jsfiddle.net/rEzSd/1/。但是，如果#theParent 的所有空间都被链接占用，则悬停的目标将是一个链接。为了清楚起见，我添加了一些填充。

【讨论】：

抱歉，我没有看到为每个链接捕获的悬停事件。当您将鼠标悬停在 DIV 而不是链接上时，将触发悬停。
如果您删除填充，您应该再次将鼠标悬停在链接上。
确实如此，但出于设计原因，需要在链接周围进行填充。我希望当用户将鼠标移到 div 上，然后 div 和 A hover 的链接都会触发。不幸的是，我想我已经发现 mouseenter 和 mouseleave 事件实际上并没有冒泡。