火災點擊事件只有最裏面的jQuery元素

我想點擊HTML樹中最內層元素的點擊事件，但由於有一個點擊甚至綁定到它的父容器，這兩個事件都會被觸發，這是不是我所需要的。我之前用stopPropagation（）解決了這個問題，但我似乎無法讓它在今天工作。火災點擊事件只有最裏面的jQuery元素

jQuery('#parent li').click(function() { 
    jQuery(this).children('.contained').slideDown(); 
}); 
jQuery('.contained').click(function() {     
    Query(this).slideUp(); 
});

，讓我們說這是我們的HTML：

<ul id="parent"> 
    <li> 
     click to show more 
     <p class="contained">click to hide</p> 
    </li> 
</ul>

我相信，這將無法驗證，因爲它包含了一個禮中的P，但讓我們忽略暫時爲了簡單起見。我怎麼能沒有父點擊內部元素slideUp（）甚至觸發它後立即slideDown（）？

來源

2013-01-21 Russell Strauss

'Query'應讀作jQuery'我相信。在複製代碼的時候可能你錯過了它，但只是注意到了。 –

return false停止冒泡：

jQuery('.contained').click(function() {     
    Query(this).slideUp(); 
    return false; 
});

注意，返回false也阻止事件的默認行爲。 Read more here。

或者使用事件對象的stopPropagation功能：

來源

2013-01-21 22:32:24 gdoron

謝謝你，先生！我從未意識到你可以這樣做。 –

第二種方法是我通常如何做到這一點，但我得到的錯誤是對象沒有stopPropagation（）。另一方面，返回錯誤的作品非常漂亮。 –

@RussellStrauss，關於'stopPropagation'你可能有一個拼寫錯誤，或者你忘記在「函數聲明」中聲明事件對象 – gdoron

答案是阻止事件的傳播。您可以使用stopPropagation及其雙胞胎，stopImmediatePropagation來做到這一點，或者您可以通過從處理程序返回false來停止傳播並阻止默認操作。 stopPropagation方法將防止事件冒泡，也就是事件在DOM樹上的傳播。 stopImmdiatePropagation可以做到這一點，但也可以防止同一級別的其他處理器開火。返回錯誤等同於在事件上使用stopPropagation和preventDefault。

來源

2013-01-21 22:34:12 tvanfosson

兩種方式做到這一點，停止傳播或將二者結合起來點擊處理和調整代碼根據event.target

目標方法：

jQuery('#parent li').click(function(event) { 
    var $tgt=jQuery(event.target) 
    if (!$tgt.is('.contained')){ 
     jQuery(this).children('.contained').slideDown(); 
    }else{ 
     $tgt.slideUp(); 
    } 
});

來源

2013-01-21 22:37:16 charlietfl

火災點擊事件只有最裏面的jQuery元素

回答

相關問題