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");
    });
});

当我点击某个项目时，仅提醒列表。但是，如果我点击图片，那么 for image ，之后 For list 会收到提醒。

我想要的是，如果有人点击li元素，列表应该收到提醒，但如果他点击图片，则只会提醒 for image ，< for list 不应该被警告。

Answer 1

这是因为event bubbling，所以你可以通过调用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");
});

我认为这question可能对您有帮助。

Answer 4

如果您不希望任何仅写return false的操作采取任何操作。这将防止多次触发您的功能代码。

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

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

如何防止点击在jQuery中触发多个单击处理程序调用

4 个答案: