返回 false 不应该阻止 jQuery on() 冒泡吗?

发布于 2024-12-22 23:48:05 字数 712 浏览 2 评论 0原文

根据 jQuery 文档

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。错误值可以 也可以作为 function(){ return 的简写形式传递给处理程序 错误的; }。所以, $("a.disabled").on("click", false);附加一个事件 处理所有带有“disabled”类的链接,以防止它们 单击它们时会被跟踪,并且还会停止事件 冒泡。

因此,当我创建点击事件时:

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

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

我唯一的解释是我们想到的是,如果允许这种情况发生,那么 on() 函数就会变得毫无意义,所以在这种情况下它可能会被绕过吗?

on() 就冒泡而言遵循什么规则?

According to the jQuery docs

Returning false from an event handler will automatically call
event.stopPropagation() and event.preventDefault(). A false value can
also be passed for the handler as a shorthand for function(){ return
false; }. So, $("a.disabled").on("click", false); attaches an event
handler to all links with class "disabled" that prevents them from
being followed when they are clicked and also stops the event from
bubbling.

So when I create a click event:

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

I would expect the click to not register since it would not have a chance to propagate from .toggle to #sidebar

The only explanation I've come up with would be that if this was allowed to happen it would make the on() function fairly pointless, so perhaps it's bypassed in this case?

What rules does on() follow as far as bubbling?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

嘴硬脾气大 2024-12-29 23:48:05

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

因此,当您单击内部元素时,事件会冒泡,直到到达“#sidebar”,然后仅执行处理程序。在处理程序中返回 false,将停止进一步向上的传播。


.on() 的文档通过示例提到了这一点:

除了能够处理后代元素上的事件之外
尚未创建,委托事件的另一个优点是它们
当必须有许多元素时,开销可能会低得多
被监控。在表体中有 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());
});

Actually, the handler is attached to the element #sidebar, not to the .toggle elements.

So when you click on an inner element, the event bubbles up until it reaches `#sidebar' and then only the handler is executed. Returning false in the handler, will then stop the propagation further up.


The documentation for .on() mentions this through an example:

In addition to their ability to handle events on descendant elements
not yet created, another advantage of delegated events is their
potential for much lower overhead when many elements must be
monitored. On a data table with 1,000 rows in its tbody, this example
attaches a handler to 1,000 elements:

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

A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});
朱染 2024-12-29 23:48:05

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

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

event.stopImmediatePropagation()

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

In order for on() to work, the click event must bubble up to the calling element, in this case #sidebar. on() then looks at the target of the click to determine if it is .toggle and fire the function accordingly.

You can pass the event into your handler and add

event.stopImmediatePropagation()

to prevent other bound handlers from firing.

凉风有信 2024-12-29 23:48:05

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

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

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

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

The click event in your example is attached to #sidebar, and if you return false from the handler, it will not propagate further up the DOM tree.

Here is an example fiddle: http://jsfiddle.net/QymkW/

This is one of the reasons for the recent change in the syntax for event delegation, using the .live() syntax, one would think that the event was attached to the element you pass in the chain, but it was always the document. This was confusing in terms of propagation.

Using the .on() syntax, you now paint a better picture of what is really going on. The event is attached to the element passed, and then you can add a second argument if you want to delegate events from descendants. So the propagation "must" happen between the delegated descendants and the element for the delegation to work, but you can still prevent bubbling from the element that attached the event (in your case #sidebar)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文