2012-08-11 80 views
5

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

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

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

我似乎无法使它工作。我知道on()函数正在被触发,但似乎不是event.stopPropagation。有小费吗?

+0

你是否真的意识到'stopPropagation();'的含义?看看http://www.javascripter.net/faq/eventbubbling.htm#demo – 2012-08-11 01:59:40

回答

12

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

这是因为事件传播使得委托事件处理首先处于工作状态,所以当事件处理程序被调用时,事件已经传播。

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

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

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

+0

你能想到一个解决方案吗? – Harangue 2012-08-11 00:14:41

+1

@ J4G - 一些选项添加到我的答案。 – jfriend00 2012-08-11 00:17:01

+0

可以在对象上使用.on(“click”)后使用.click()吗? – Harangue 2012-08-11 20:06:31