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

Question

嘿，我有一个由 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 的重定向不再发生，只会发生按钮单击事件

Answer 1

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


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

Answer 2

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

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

source