Question

我有div，事件点击它就可以点击，而div包含项目列表，每个项目也有一个事件。我想要做的是只触发被点击项目的事件，而不是项目和它的容器事件。 fiddle

<div class="container">
    <ul>
        <li>action 1</li>
        <li>action 2</li>
        <li>action 3</li>
    </ul>
</div>
<div id="result"></div>

$('.container').click(function(){
   var x = document.getElementById('result');
    $(x).append(' container clicked');
});

$('.container ul').on('click','li',function(e){
    e.preventDefault();
   var x = document.getElementById('result');
    $(x).append(' li clicked');
});

Answer 1

您需要e.stopPropagation()

$('.container ul').on('click','li',function(e){
    e.stopPropagation();
    var x = document.getElementById('result');
    $(x).append(' li clicked');
});

e.preventDefault();可能会消失，因为没有默认操作可以抑制。

我希望你能这样做：

$('.container ul').on('click','li',function(e){
    e.stopPropagation();
    $("#result").append(this);//move the clicked LI element to the container #result
});

Answer 2

使用stopPropagation

$('.container ul').on('click','li',function(e){
    e.stopPropagation();

    var x = document.getElementById('result');
    $(x).append(' li clicked');
});

Example

对具有事件的div内容触发事件

2 个答案: