返回 false 不应该阻止 jQuery on() 冒泡吗?
根据 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
实际上,处理程序附加到元素
#sidebar
,而不是.toggle
元素。因此,当您单击内部元素时,事件会冒泡,直到到达“#sidebar”,然后仅执行处理程序。在处理程序中返回 false,将停止进一步向上的传播。
.on() 的文档通过示例提到了这一点:
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:
为了让
on()
工作,点击事件必须冒泡到调用元素,在本例中是#sidebar
。然后,on()
查看单击的目标以确定它是否为.toggle
并相应地触发该函数。您可以将事件传递到您的处理程序并添加
以防止其他绑定处理程序触发。
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
to prevent other bound handlers from firing.
您示例中的单击事件附加到
#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 thedocument
. 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
)