Tengo un componente de tarjeta que envolví con una etiqueta. En la etiqueta, he añadido algún botón. Ahora, el problema es que cuando hago clic en el botón, la etiqueta me envía a la URL, pero no quiero ir a una página cuando hago clic en un botón.
Probé event.stopPropagation() pero no funcionó con la etiqueta. Entonces, si hay alguna forma de resolverlo, házmelo saber.
Gracias
<a href="/somewhere1"> <button>Hide</button> <div> <div> <img src="https://dummyimage.com/200x200/000000/fff" alt="" /> <span>name</span> </div> <a href="/somewhere2">Title</a> </div> </a> Aquí quiero que la etiqueta <button></button> no se pueda vincular.
Aquí hay un pequeño ejemplo de cómo podrías lograrlo.
const wrapperRef = document.querySelector('#wrapperRef'); wrapperRef.addEventListener('click', (event) => { if(event.target === wrapperRef.querySelector('button')){ event.preventDefault(); //what should happen if you click on button } }) <a id="wrapperRef" href="/somewhere"> <button>Hide</button> <div> <div> <img src="" alt="" /> <span>name</span> </div> </div> </a>Atrapa el clic dentro del envoltorio de una etiqueta, luego verifica si el objetivo en el que se ha hecho clic es igual al botón interior. Si es así, deja de redirigir y puede agregar código (creo que oculta el href) en la función.
Sería una adición de:
wrapperRef.style.display = 'none'o eliminarlo del dom:
wrapperRef.parentNode.removeChild(wrapperRef);No es una buena idea tener enlaces anidados dentro de un enlace. En su lugar, puede envolver los elementos de su tarjeta en un envoltorio div y ubicar este enlace del tamaño de una tarjeta completa dentro de él y diseñarlo. En Code Snippet a continuación, se llama .outer-link . Podemos estirarlo al tamaño de la tarjeta, de modo que se pueda hacer clic en toda la tarjeta; Los elementos, en los que también se debe hacer clic dentro de esta tarjeta, se pueden mover delante de los enlaces estirados:
.inner-link, .toggle-button { ... }En este caso, no tiene que crear ningún código JS para anular el comportamiento de los enlaces, verifique Code Snippet:
const btnTrigger = () => { console.log('click'); } .card { position: relative; } /* make link card-size */ .outer-link:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #ff634721; } /* make inner link and button be in front of full-size link */ .inner-link, .toggle-button { position: relative; z-index: 1; } <div class="card"> <button class="toggle-button" onclick="btnTrigger()">Hide</button> <div> <div> <img src="https://dummyimage.com/200x200/000000/fff" alt="" /> <span>name</span> </div> <a class="inner-link" href="/somewhere2">Title</a> </div> <a class="outer-link" href="/somewhere1"></a> </div>