Tengo el siguiente código :-
<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>Aquí pongo un carrusel de imágenes con un botón de punto en una etiqueta de enlace. Aquí me enfrento a un problema. Cuando hago clic en la tarjeta, redirige el enlace href para usar una etiqueta. Pero el problema es que cuando hago clic en el botón de punto para deslizar las imágenes, redirige el enlace href. ¿Cómo puedo deshabilitar href y el botón de punto de trabajo para imágenes deslizantes?
¡Gracias!
Puedes usar esto:
<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>Y después de eso, cuando haga clic en la imagen, ya no lo redirigirá.
Puede usar la función de controlador onClick si desea ejecutar una lógica como esta:
// 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>con esto puedes hacer tus otras cosas al hacer clic en el ancla sin redirigir.