Javascript 单击子项时停止父项单击（React或JS）

我有一个粘滞条，我想让用户通过在右边有一个X来结束，带有

position:absolute

。然而，当点击时，它也会触发“分享到Facebook”事件。我该如何阻止这种情况发生

JS文件

return (
    <div
      className={'ShareBar'}
      onClick={()=>console.log('sharing')}>
        <span className={'ShareCTA'}>
          {facebook.svg} Share on Facebook &trade;
          <span
            className={'CloseButton'}
            handleClick={function (e) { e.stopPropagation()/*attempted fix*/; console.log('closing'); return; }}>
              X
          </span>
        </span>
    </div>
  );

---

将共享内容包装到Facebook文本中，并将onClick处理程序附加到其中

---

您不应该将带有onClick的元素嵌套在另一个带有onClick的元素中。

stopPropagation

将像您编写的那样工作，但是单击事件的事件处理程序称为

onClick

，而不是

handleClick

：

<span
  className={'CloseButton'}
  onClick={e => e.stopPropagation()}
>
  X
</span>

e.stopPropagation（）}
>
X

Thank you@Daniel，我同意这不是最佳做法，但我更希望整个栏都可以点击（但该圆圈需要点击关闭栏）

<span
  className={'CloseButton'}
  onClick={e => e.stopPropagation()}
>
  X
</span>