0
235
ViewsCómo deshabilitar el enlace en el botón pero cuando hago clic en el enlace de la tarjeta debería funcionar
Estoy usando una tarjeta y cuando hago clic en la tarjeta funciona bien. Ahora he agregado tres botones en las tarjetas cuando hago clic en el botón y luego el enlace de la tarjeta también llama. solo quiero realizar una acción diferente desde el botón pero no desde el enlace de la tarjeta.
Este es el código:
<li class="t-Cards-item #CARD_MODIFIERS#" data-id="#ID#" > <div class="click t-Card" > <a href="javascript:void(null);" class="t-Card-wrap" data-id="#ID#"> <div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div> <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3> <h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div> <div id="outer"> <div class="inner"><button class="msgBtn" >S</button></div> <div class="inner"><button class="msgBtn2" onClick="return false;">M</button></div> <div class="inner"><button class="msgBtnBack">L</button></div> </div> <div class="t-Card-body"> <div class="t-Card-desc">#CARD_TEXT#</div> <div class="t-Card-info">#CARD_SUBTEXT#</div> </div> <span class="t-Card-colorFill u-color #CARD_COLOR#"></span> </a> </div> </li>1 answers
Answer question0
El problema
Suponga que hay dos divs con dos botones diferentes en ellos.
<div onClick={handleOutter}> <div onClick={handleInner}> // some content ... </div> </div> llamar a handleOutter llamará a la función handleInner . este es el comportamiento predeterminado de la propagación de eventos en sus elementos. más información sobre la documentación de MDN .
La solución
Puede detener la propagación de eventos en los elementos secundarios agregando event.stopPropagation() en la función del controlador de esta manera:
const btn = document.getElementById('myParentElement'); btn.onclick = function (event){ event.stopPropagation(); // ... }más información sobre la documentación de MDN .