ReactJS实现：点击元素内按钮时忽略父元素点击事件

这个问题是事件冒泡导致的——当点击按钮时，点击事件会从按钮向上冒泡到父级div，触发div的点击回调。要只让按钮的点击事件生效，你需要阻止事件向上传播。

方法一：使用stopPropagation() #

在按钮的点击事件处理函数中，调用事件对象的stopPropagation()方法，直接阻止事件冒泡：

<div onClick={() => alert(1)}>
    ...content
    <button onClick={(e) => {
        e.stopPropagation();
        alert(2);
    }}>Click me!</button>
</div>

方法二：判断事件目标（可选） #

如果你不想直接阻止冒泡，也可以在div的点击事件里判断触发事件的目标是否为div本身，避免不必要的回调触发：

<div onClick={(e) => {
    if (e.target === e.currentTarget) {
        alert(1);
    }
}}>
    ...content
    <button onClick={() => alert(2)}>Click me!</button>
</div>

第一种方法更适配你的场景，因为按钮是绝对定位在div内，点击按钮时明确不需要触发div的事件。

内容的提问来源于stack exchange，提问作者TopoR