jQuery on() 和 stopPropagation()

Question

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

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

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

我似乎无法让它发挥作用。我知道 on() 函数正在被触发，但 event.stopPropagation 似乎没有被触发。有什么建议吗？

Answer 1

您不能使用stopPropagation()使用委托(delegate)事件处理(其中事件处理程序位于父级上)。

这是因为事件传播首先使委托(delegate)事件处理起作用，因此当您的事件处理程序被调用时，事件已经传播。

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

如果您需要阻止父对象获取事件传播，则不能使用委托(delegate)事件处理。您必须将事件处理程序直接分配给对象本身，以便您可以在事件传播之前拦截该事件。如果这些是动态创建的对象，那么您必须在创建它们后立即为其分配事件处理程序。

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