Tengo un button anidado en una etiqueta <a> . La etiqueta <a> tiene un atributo href y el button llama a una función. Cuando hago clic en el button , se llama a la función del button y luego la página se redirige a href . Pero quiero ejecutar solo la función del button y no redirigir cuando hago clic en el button .
<a href='/path/to/somewhere' > <div > <someElements .... /> <button onClick='someFunction();' >Click</button> </div> </a> Puede suponer que <a> es una tarjeta y href es una ruta a información detallada. El button puede ser un botón Me gusta o marcar en la tarjeta.
puede agregar un evento de clic a elemento a y verificar si el objetivo del evento que proviene del botón ejecuta preventDefault()
document.querySelector('#link').addEventListener('click', (event) => { if (event.target === document.querySelector('#button')) { console.log('button clicked') event.preventDefault() } }) <a href="https://www.google.com" id="link"><button id="button">button</button></a>Puede agregar el token de evento al evento onClick y usar e.preventDefault() para anular el evento de la etiqueta de anclaje:
function someFunction(e) { e.preventDefault() console.log('some function executed') } <a href='/path/to/somewhere' > <div> <div>Element 1</div> <div>Element 2</div> <div>Element 3</div> <button onClick='someFunction(event);' >Click Me</button> </div> </a>Sin embargo, probablemente sea una mejor práctica mover el botón fuera de la etiqueta de anclaje:
function someFunction() { console.log('some function executed') } <a href='/path/to/somewhere' > <div> <div>Element 1</div> <div>Element 2</div> <div>Element 3</div> </div> </a> <button onClick='someFunction();' >Click Me</button>