單擊子項時停止父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

stopPropagation將像你編寫的那樣工作，但點擊事件的事件處理程序被稱為onClick ，而不是handleClick ：

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

Answer 2

將共享包含到跨越的Facebook文本中，並將onClick處理程序附加到該文本。

您不應該使用onClick將帶有onClick的元素嵌套在另一個元素中。