Question

根据the jQuery docs

从事件处理程序返回false将自动调用 event.stopPropagation（）和event.preventDefault（）。假值可以也可以作为function（）{return的简写传递给处理程序假; }。所以，$（“a.disabled”）。on（“click”，false）;附上一个活动处理所有具有“禁用”类的链接，阻止它们点击它们时被跟踪并且也会停止事件鼓泡。

所以当我创建一个点击事件时：

$('#sidebar').on("click", ".toggle", function() {
    $(this).parents("p").next("ul").toggle(400);
    return false;
});

我希望点击不会注册，因为它没有机会从.toggle传播到#sidebar

我提出的唯一解释是，如果允许这种情况发生，它会使on()函数毫无意义，所以也许在这种情况下被绕过了？

on()对冒泡有什么规则？

Answer 1

为了让on()起作用，click事件必须冒泡到调用元素，在本例中为#sidebar。 on()然后查看点击的目标以确定它是否为.toggle并相应地触发该功能。

您可以将事件传递到处理程序并添加

event.stopImmediatePropagation()

防止其他绑定处理程序触发。

Answer 2

实际上，处理程序附加到元素#sidebar，而不是.toggle元素。

因此，当您点击内部元素时，事件会一直冒泡，直到它到达`＃sidebar＆＃39;然后只执行处理程序。在处理程序中返回false，然后将进一步停止传播。

.on()的文档通过一个例子提到了这一点：

除了能够处理后代元素的事件外尚未创建，委托事件的另一个优势是他们的当许多元素必须存在时，开销要低得多监控。在此示例中，在其tbody中包含1,000行的数据表中将处理程序附加到1,000个元素：

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒出一个级别（从点击的tr到tbody）：

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Answer 3

示例中的click事件附加到#sidebar，如果从处理程序返回false，它将不会在DOM树中进一步传播。

以下是一个示例小提琴：http://jsfiddle.net/QymkW/

这是最近更改事件委派语法的原因之一，使用.live()语法，人们会认为事件附加到您在链中传递的元素，但它总是document。这在传播方面令人困惑。

使用.on()语法，您现在可以更好地了解实际情况。事件附加到传递的元素，然后如果要从后代委托事件，则可以添加第二个参数。因此，传播“必须”发生在委派的后代和委托工作的元素之间，但您仍然可以防止附加事件的元素冒泡（在您的情况下为#sidebar）

不应该返回false阻止jQuery on（）冒泡？

3 个答案: