事件冒泡和 jQuery答案

【问题标题】：Event Bubbling and jQuery事件冒泡和 jQuery
【发布时间】：2011-06-11 06:07:04
【问题描述】：

我正在尝试捕获一个将 DOM 冒泡到正文的单击事件，检查单击元素的选择器是什么，然后基于此选择调用函数。

类似这样的：

<body>
    <a id="do-default-code">Default code</a>
    <a id="do-override-code">Override code</a>
</body>

我正在想象这样的（伪代码）。我正在使用 jQuery：

$('body').bind('click', function() {
    if ($(this) === $('#do-override-code')) {
        overrideCode();
    } else {

    }
});

我意识到我并不完全理解这种情况下的事件冒泡，并且上面的代码不正确，所以我正在向社区寻求指导。

【问题讨论】：

对于初学者，您使用的引号不匹配...
@drachenstern 感谢您的敏锐眼光。您对如何捕获此事件并检查单击元素的选择器有什么建议？
您将两个 jQuery 对象与=== 的比较将永远相等：http://fixingthesejquery.com/#slide27 -- 另外，您可能想看看.is()跨度>

标签： jquery jquery-events event-bubbling

【解决方案1】：

在您的声明中，您的this 指的是您已将事件绑定到的元素。在这种情况下，body 元素。因此，if 语句永远不会为真。

因此，要获取您实际点击的元素，您需要检查事件对象中的目标。像下面这样的东西应该可以工作。

$('body').bind('click', function(event) {
    if ($(event.target).attr('id') == 'do-override-code')) {
        overrideCode();
    } else {

    }
});

【讨论】：

但是为什么不只是$('body').delegate('#do-override-code', 'click', fn);，因为它基本上做同样的事情。
另外，event.target.id == 'do-override-code' 应该足够了，而且比调用.attr() 更快
如果我需要调用overrideCode() 但不调用绑定到'#do-override-code' 的任何其他事件，你会推荐什么？目前我正在做一些有点笨拙的事情：element.unbind('click'); element.bind('click', overrideCode);

【解决方案2】：

您需要在函数中传递事件并检查该事件。

此链接提供了您可能想知道的所有信息http://www.quirksmode.org/js/events_properties.html，例如

哪个 HTML 元素是事件的目标？

您可以从中轻松提取所需的任何语义信息

【讨论】：