如何防止點擊觸發jQuery中的多個點擊處理程序調用

Question

我使用jQuery的列表和div元素單擊。 HTML代碼是-

<ul class="list-group">
    <li class="list-group-item">
        <div>
            <div>
                Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
            </div>
            <div>
                More thing
            </div>
        </div>
    </li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

jQuery代碼是-

$( document ).ready(function()
{
    $(".list-group-item").click(function()
    {
        alert($("For list");
    });

    $("#image_click").click(function()
    {
        alert("for image");
    });
});

當我單擊li項時，僅“ For list”被提醒。 但是，如果我單擊圖像，則對於圖像以及此后的列表警報。

我要的是，如果有人點擊李元素， 對於表應警惕，但如果他點擊了圖片，只為圖像應警惕， 對名單不應該被警告。

Answer 1

這是因為事件冒泡 ，所以您可以通過調用Event.stopPropagation（）來停止它

$("#image_click").click(function (e) {
    e.stopPropagation();
    alert("for image");
});

Answer 2

使用stopPropagation（） ; ：停止冒泡事件

 $("#image_click").click(function(e)
    {
       e.stopPropagation();
        alert("for image");
    });

Answer 3

或者您可以嘗試以下代碼：

$(".list-group-item").click(function (e) {
    if(this==e.target)
         alert("for list");
});  

我認為這個問題可能對您有幫助。

Answer 4

如果您不希望任何簡單寫入的操作中的任何操作，則return false 。 這樣可以防止多次觸發您的功能代碼。

 $(".list-group-item").click(function(){
       return false;
    });

$("#image_click").click(function(){
     alert("for image");
});