javascript - 单击子项时停止父项 onClick(React 或 vanilla JS)

Question

我有一个粘性栏，我想让用户通过在右侧放置一个 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>
  );

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

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

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