如何禁用锚标记中某些元素的重定向？ [复制]答案

【问题标题】：How to disable redirecting for some elements in an anchor tag? [duplicate]如何禁用锚标记中某些元素的重定向？ [复制]
【发布时间】：2021-11-21 03:59:12
【问题描述】：

我有以下代码：-

<a href="/">
 <h1>Hello Wolrd</h1>
 <p>This is some description</p>
 <div>....this is Image Carousel</div>
 <div class="dotButton>
   <button></button>
   <button></button>
   <button></button>
 </div>
</a>

在这里，我在链接标签中放置了一个带有点按钮的图像轮播。在这里，我面临一个问题。当我单击卡片时，它会重定向 href 链接以使用标签。但问题是当我单击点按钮滑动图像时，它会直接指向 href 链接。如何禁用滑动图像的 href 和工作点按钮。

谢谢！

【问题讨论】：

将点按钮移到之外。 React 中的按钮点击是通过将onClick={handlerFunction} 添加到您的按钮来处理的。
在按钮上添加onclick={(evt) => evt.stopPropagation()}，Read Here
基本上，在锚标记下添加这么多元素并不是一个好的编码习惯。其次，如果您想避免从锚标记内的某些元素重定向属性，您需要将点击事件附加到它，处理它，并使用preventDefault() 停止重定向。然后，您可以将重定向属性添加到只需要的那些元素。

标签： javascript html css reactjs next.js

【解决方案1】：

如果你想运行一些这样的逻辑，你可以使用onClick处理函数：

// for functional Components

const handleClick=(e)=>{
     e.preventDefault();
    // write your logic for on click
}


 <a onClick={handleClick}>
   <h1>Hello Wolrd</h1>
   <p>This is some description</p>
   <div>....this is Image Carousel</div>
   <div class="dotButton">
     <button></button>
     <button></button>
     <button></button>
   </div>
</a>

有了这个，您可以在单击锚点时执行其他操作而无需重定向。

【讨论】：

【解决方案2】：

你可以用这个：

<a href="javascript:void(0)">
 <h1>Hello Wolrd</h1>
 <p>This is some description</p>
 <div>....this is Image Carousel</div>
 <div class="dotButton">
   <button></button>
   <button></button>
   <button></button>
 </div>
</a>

然后，当您单击图像时，它将不再重定向您。

【讨论】：