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

Posted 2023-02-21

【中文标题】有没有办法让父链接排除一些子元素？

【英文标题】：Is there a way to make the parent Link exclude some child elements?

【发布时间】：2019-12-15 15:55:08

【问题描述】：

所以我的列表的每一行都有一个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 事件，但也会弹出弹出窗口。

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

【问题讨论】：

事件冒泡和捕获参考：developer.mozilla.org/en-US/docs/Learn/javascript/…

您是否尝试过在您的点击处理程序中阻止默认设置？

嗨 Ryker，请阅读此内容 - ***.com/help/someone-answers，然后尝试关闭问题。

【参考方案1】：

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

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

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

【讨论】：

所以 preventDefault 和 stopPropagation 的组合适用于<CopyButton />，但由于某种原因不适用于 ``？

【参考方案2】：

stopPropagation 是您所追求的。它可以防止点击事件在链上冒泡（从子到父）。

button.onclick = function(event) 
    // do stuff
    event.stopPropagation();
;

【参考方案3】：

您只需要e.stopPropagation()。

stopPropagation() 方法允许您阻止当前事件的传播。

childOnclick1 = (e) => 
  e.stopPropagation();
  alert("child clicked");

Demo

【参考方案4】：

stopPropagation() 不适合我，所以我改用preventDefault()。

【讨论】：

有什么理由做出这样的改变？

@niektuytel 我真的不记得了