使元素内的按钮可点击，同时元素本身也可点击

Question

我有一个简单的侧边栏，其中有一堆列表项，列表项旁边有一个按钮，如下所示：

我将一个点击处理程序附加到该<li>元素，如下面的代码所示：

<li className="note" onClick={()=> props.selectNote(props.note)} role="button">
    <button className="delete-note" onClick={() => console.log('Fired')}>Delete dis</button>
    <span className="updated-at">2hr</span>
    <div className="note-content">
        <h4 className="note-title">
            {title}
        </h4>
        <p className="note-preview">
            {notePreview.substr(0, 80)}...
        </p>
    </div>
</li>

但正如预期的那样，当我单击旁边的按钮时，实际li被单击，而不是其中的按钮。我认为这是事件如何冒泡的某种问题，以及将onClick处理程序附加到非交互式元素是一种不好的做法（我的 ESLint 是这么说的）。

我想要的是：

1. 单击列表项时，onClick会触发附加事件。
2. 单击按钮时，触发onClick按钮上的事件，而不是<li>.

Answer 1

黑客入侵！

我通过向name我不想触发主单击事件的元素添加一个属性来解决这个问题：

handleClick = (e) => {
    if(e.target.name === 'deleteButton') {
        e.preventDefault();
        e.stopPropagation();
    }else {
        this.props.selectNote(this.props.note)
    }
}


<li className="note" onClick={this.handleClick} role="button">
    <button className="delete-note" name="deleteButton" onClick={() => console.log('Fired')}>Delete dis</button>
    <span className="updated-at">2hr</span>
    <div className="note-content">
        <h4 className="note-title">
            {title}
        </h4>
        <p className="note-preview">
            {notePreview.substr(0, 80)}...
        </p>
    </div>
</li>

您需要检查哪个元素触发了该事件，如果是按钮则阻止它。