html 按钮位于链接顶部

Question

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

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

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

正在 Nodejs React 中对此进行编码，所以我使用了 onClick 事件

例子

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

我已经尝试过event.stopPropagation按按钮，但它似乎仍然没有任何作用。是因为链接是 anhref而不是 a 吗onClick？

解决方案

因此，使用下面的一些可能的解决方案，我开始乱搞，并在删除按钮的 onClick 中注意到，如果我添加以下内容，它就会起作用：

event.preventDefault()

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

Answer 1

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

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

来源