2012-08-11 82 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