2

根据jQuery 文档

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。也可以为处理程序传递一个 false 值作为 function(){ return false; 的简写。}。所以， $("a.disabled").on("click", false); 将事件处理程序附加到具有“已禁用”类的所有链接，以防止在单击它们时跟踪它们，并阻止事件冒泡。

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

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

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

我想出的唯一解释是，如果允许这种情况发生，它将使该on()功能变得毫无意义，所以在这种情况下可能会绕过它？

on()冒泡遵循什么规则？

4

3 回答 3

5

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

因此，当您单击内部元素时，事件会冒泡，直到到达“#sidebar”，然后仅执行处理程序。在处理程序中返回 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());
});
于 2011-12-27T19:53:03.560 回答
4

为了on()工作，点击事件必须冒泡到调用元素，在这种情况下#sidebar。on()然后查看单击的目标以确定它是否是.toggle并相应地触发该功能。

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

event.stopImmediatePropagation()

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

于 2011-12-27T19:50:24.970 回答
2

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

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

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

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

于 2011-12-27T19:41:41.383 回答