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

Answer 2

使用stopPropagation

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

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

Example

div 的内容触发事件

Trigger event on div's content which has event

javascript

jquery

events

onclick