jQuery on()和stopPropagation()

时间:2012-08-11 00:10:11

标签: jquery stoppropagation

我有一个从左侧滑入的侧窗格,使用get()动态添加内容。我希望窗格外的所有点击都能通过触发函数来关闭它。根据我读到的其他问题,我想出了以下代码。

$('html').click(function() {
    if (side_showing) {
        close_side();
    }
});

$(document).on("click", "#side", function(event) {  
    event.stopPropagation();
});

我似乎无法使其发挥作用。我知道on()函数正在被触发,但event.stopPropagation似乎不是。有什么提示吗?

1 个答案:

答案 0 :(得分:13)

您不能将stopPropagation()与委派事件处理一起使用(事件处理程序在父级上)。

这是因为事件传播使得委托事件处理首先工作,因此在调用事件处理程序时,事件已经传播。

代码中发生的事情的顺序是:事件传播到文档对象,然后调用事件处理程序。因此,当您调用event.stopPropagation()时,它不会执行任何操作,因为事件已经传播。

如果您需要保持父对象不被事件传播,那么您就不能使用委托事件处理。您必须将事件处理程序直接分配给对象本身,以便在传播之前拦截事件。如果这些是动态创建的对象,那么您必须在创建它们之后立即为它们分配事件处理程序。

我所知道的唯一其他解决方案是将事件处理程序放在您不希望看到这些事件的父对象上,并确保这些事件处理程序忽略它们来自#side对象的事件。