单击孩子时停止父onClick（React或Vanilla JS）

Question

我有一个粘性条，我想通过在position: absolute的右侧添加一个X来关闭用户。但是，当单击时，它还会触发“共享到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>
  );

CSS文件（这是一个Sass文件，因此没有分号和内容

.ShareBar
  position fixed
  bottom 0
  z-index 9999
  display flex
  justify-content flex-end
  align-items center
  height 48px
  cursor pointer
  width 100%
  ...

  .ShareCTA
    width 100%
    position relative
    display flex
    justify-content center
    align-items center
    font-size 20px
    ...
    svg
      height 20px

  .CloseButton
    position absolute
    z-index 99999
    right 10px
    border-radius 50%
    height 40px
    width 40px
    display flex
    justify-content center
    align-items center
    ...

Answer 1

在一个跨度中将“共享到Facebook”文本包装起来，并将onClick处理程序附加到该文本。

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

Answer 2

stopPropagation将像您编写的一样工作，但是单击事件的事件处理程序称为onClick，而不是handleClick：

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