How to disable redirecting for some elements in an anchor tag? [duplicate]-CodePudding

I have the following code :-

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

Here I put a image carousel with dot button in a link tag. Here I face one problem. When I click the card it redirects href link for using a tag. But problem is when I click dot button to slide the images, it ridirect href link. How can I disable href and working dot button for sliding images.

Thank you!

CodePudding user response：

You can use onClick handler function if you want to run some logic like this:

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

with this you can do your other stuff on clicking the anchor without redirecting.

CodePudding user response：

You can use this :

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

And after that when you will click the image it will not redirect you anymore.