如何禁用锚点标签中某些元素的重定向？[重复]

Question

我有以下代码：-

<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和工作点按钮？

谢谢大家！

Answer 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>

有了这个，你可以做你的其他事情，点击锚点，而不重定向。

Answer 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>

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