javascript - 有没有办法让父Link排除一些子元素？

Question

所以我有一个 Link在我的列表的每一行上打开一个弹出窗口。其中有复制按钮和另一个按钮。这两个按钮都在它们自己的 div 中。我如何获得 Link在这两个按钮上禁用？

我试过使用 pointer-events: none , overlay和 z-index但它们都不起作用。

编辑:好的，所以我刚刚意识到我应该添加更多信息。所以 <CopyButton/>当我同时使用 stopPropagation 时有效和 preventDefault但不适用于 <Button2 /> .它还会弄乱分页。

<Link to={`/whatever?id=abcme`} onClick={() => loadFlyout()}>
  <div>
    // Second column
  </div>

  <div>
    // Third column
  </div>

  <div className={styles.id}>
    <span>Text</span>
    <span>
        <CopyButton/> 
    </span>
  </div>

  <div>
    // Fifth column
  </div>

  <div>
      <Button2/>
  </div>
</Link>

点击 <Button2 />和 <CopyButton />两者都执行各自的 onClick 事件，但也会弹出弹出窗口。

不太确定我正在尝试做的事情是否可行，如果有任何帮助将不胜感激!

Answer 1

在您的点击处理程序中，您必须执行事件阻止默认或停止传播，具体取决于您希望事件如何 react :

onClick(e) A custom handler for the click event. Works just like a handler on an tag - calling e.preventDefault() will prevent the transition from firing, while e.stopPropagation() will prevent the event from bubbling.

https://knowbody.github.io/react-router-docs/api/Link.html