React点击事件不冒泡

Question

我在反应事件冒泡方面遇到问题。我在 span 元素和上部元素的某个地方有 icon 配对，如下面的 example:

const App = () => {
  const onClick = (event) => alert(event.target.nodeName);
  return (
    <section onClick={onClick}>
      <span>
        <i className="fas fa-reply"></i> Click me
      </span>
    </section>
  );
};

点击 i 标签后，我正在等待事件冒泡 - 至少调用 onClick 两次 （第 1 次用于 i，第 2 次用于 span）。但它永远不会发生。你能告诉我为什么吗？

我知道可能的解决方案 - 将 i 上的 pointer-events 设置为 none，但我更好奇为什么事件不冒泡。

谢谢

Answer 1

我看到了你在问题中提到的代码。

首先你没有添加onClick事件

<i/>

标签。首先在其中添加 onClick 然后尝试为 span 添加。到目前为止，我看到您只为部分添加了 onClick。

React点击事件不冒泡

React click event not bubbling

javascript

dom-events

reactjs