javascript - 多个按钮的单击处理程序并停止将事件传播到父级？

Question

作为 ajax 调用的结果，我正在生成一堆“li”项。它们看起来像:

<li>
  <p>Hello result 1</p>
  <button>remove</button>
</li>    
<li>
  <p>Hello result 2</p>
  <button>remove</button>
</li>
...

我能否创建一个单击处理程序，当“li”项“button”元素中的任何一个被单击时将被调用，并且还会停止将单击事件传播到“li”父级？像这样的东西:

function btnClicked() {
    var liItem = this.parent; // ideally is the <li> whose button was clicked.
    return true; // don't let click event go up to <li> parent?
}

----------------编辑--------------------

另外，我不确定我是否要使用按钮元素，可能会使用可点击的 div 作为按钮 - 不过相同的技术应该适用于两者，对吧？

谢谢

Answer 1

$('li').click(function(event) {
//do something
event.stopPropagation()
});

这将适用于 jQuery。您需要更改 li 以仅选择您想要的 li 项。