在按钮点击我得到子元素的事件答案

【问题标题】：On button click i get event of child element在按钮点击我得到子元素的事件
【发布时间】：2020-06-25 05:51:48
【问题描述】：

我正在尝试在单击按钮时获取按钮事件。我在按钮内有一张图片。

<button onClick={this.selectSubject} value="PHYSICS" className="button-blue"><img src={Magnet} />PHYSICS</button>

当我点击按钮时，我会得到事件

<button value="PHYSICS" class="button-blue"><img src="/static/media/magnet.d8028ed2.svg">PHYSICS</button>

但是当我专门点击图片时，我会得到图片标签的事件

<img src="/static/media/magnet.d8028ed2.svg">

它的预期行为应该是我得到按钮元素的事件。为什么会这样。

【问题讨论】：

【解决方案1】：

您似乎正在使用event.target 来获取点击的元素。在这种情况下，每次单击时目标都不会是按钮。它总是指触发事件的元素。

我建议您使用event.currentTarget，它始终是绑定到事件的元素。

【讨论】：

【解决方案2】：

您正在单击图像，因此图像是发生onClick 事件的元素。这是预期的行为，您单击的是图像，而不是包含它的按钮。

为防止图像上发生任何点击事件，您可以使用 CSS 指针事件属性设置图像元素的样式：

pointer-events: none;

这可以防止图像上的任何指针事件（包括点击交互），并且按钮现在将成为事件返回的元素。

如果您的按钮中有多个元素，则使用以下方式设置按钮本身的样式可能会更容易：

button > * {
  pointer-events: none;
}

这将防止按钮的任何子元素被点击。

【讨论】：