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项目。