javascript - 在有事件的div内容上触发事件

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