Jquery点击li

Question

我的html设置如下：

<li>
    Header
    <button>Edit</button>
</li>

我想知道是否有办法让你点击li并发生一个动作并点击按钮并发生另一个动作。现在，如果我在li上有一个jquery click元素，当你点击按钮时会被触发。有没有办法在不更改html结构的情况下将其分开？

Answer 1

在按钮点击事件处理程序中使用event.stopPropagation() - 这将阻止事件冒泡到li

button.click(function(event){
      event.stopPropagation();
});

Answer 2

是的，你可以在按钮的处理程序上使用event.stopPropagation：

$(document).ready(function() {
    $('li').click(function() {
        alert('li clicked');
    });

    $('button').click(function(event) {
        event.stopPropagation();
        alert('button clicked');
    });
});​

演示：jsfiddle

Answer 3

您也可以使用event target。

$('li').click(function(event) {
      var $tgt=$(event.target);
       if( $tgt.is('button') ){
          alert('button clicked');
       }else{
          alert('li clicked');
       }
});