jquery - jQuery Click in 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 target。

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

Answer 3

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

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

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

演示：jsfiddle