javascript - 如何防止单击在 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 会被提醒。但是如果我点击图片，然后 for image 然后 For list 会被提醒。

我想要的是，如果有人点击 li 元素，For list 应该被提醒，但是如果他点击图片，只有 for image 应该被提醒，< strong>for list 不应被提醒。

Answer 1

是因为event bubbling , 所以你通过调用 Event.stopPropagation() 来停止它

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