已解决 - 链接顶部的 html 按钮

Posted 2023-03-05

【中文标题】已解决 - 链接顶部的 html 按钮

【英文标题】：SOLVED - html Button on top of link

【发布时间】：2020-06-25 21:57:59

【问题描述】：

嘿，我有一个由 Link 组件包裹的 div，在该 div 内我有更多按钮，但问题是，当我单击内部较小的按钮时，我实际上也单击了 Link 组件，所以我被重定向，这不是我想要的……我该如何解决这个问题？

似乎链接和按钮都被点击了，但如果我只想点击按钮，我想避免父链接。

我的意思是，当您单击链接时，该链接用于导航到某个 URL。将元素放入其中以执行其他任务。就像博客文章一样，您单击父级它会重定向您，但在子级上，该按钮将允许您将其删除

在 nodejs react 中对此进行编码，所以我使用 onClick 事件

例子

<Link to="/blog-post">
  <div className="link-post-container">
      ...blog
      <button className='deleteButton'></button>
  </div>
</Link>

我已经在按钮上尝试了event.stopPropagation，但它似乎仍然没有做任何事情。是不是因为链接是href 而不是onClick？

解决方案

所以使用下面的一些可能的解决方案，我开始搞乱并在 deleteButton 的 onClick 中注意到，如果我添加以下内容，它可以工作：

event.preventDefault()

这样，由于 href 的重定向不再发生，只会发生按钮单击事件

【参考方案1】：

const handleClick = event => 
  event.stopPropagation()
  // then write rest of your onclick code 



<button className='deleteButton' onClick=handleClick></button>

【讨论】：

我试过了，但还是不行，是不是因为父母不是onClick而是href？

【参考方案2】：

点击事件在 DOM 树中从按钮向上传播，直到到达根节点（简化解释 - 您可以了解更多关于事件传播的信息here）。这就是为什么链接也会注册它并运行它的 onclick 处理程序，将您重定向到另一个站点。

您可以在按钮的 onClick 处理程序中调用 event.stopPropagation() 来阻止事件到达封装链接。

source

【讨论】：

太棒了，读起来很棒，如果链接不是 onClick 而是 href，那还能用吗？我试过了，但无法让它工作。它仅适用于 onClick 吗？我看看我是否应该将链接从 href 更改为 onClick