时间戳

首页 > 解决方案 > 有没有办法让父链接排除一些子元素？

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

问题描述

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

我试过使用pointer-events: none，overlay但z-index都没有奏效。

编辑：好的，所以我刚刚意识到我应该添加更多信息。因此，<CopyButton/>当我同时使用两者时 's 有效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 事件，但也会弹出弹出窗口。

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

标签： javascripthtmlreactjsreact-router

解决方案

在您的点击处理程序中，您必须执行事件防止默认或停止传播取决于您希望事件如何反应：

onClick(e) 单击事件的自定义处理程序。就像标签上的处理程序一样工作 - 调用 e.preventDefault() 将阻止转换触发，而 e.stopPropagation() 将阻止事件冒泡。

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

推荐阅读