0
253
ViewsHow to disable link on Button but when I click on card link should be work
I am Using card and when i click on card its work fine. Now i have added three buttons in cards when i click on button then card link also call. i just want to perform different action from button but not card link.
This is code:
<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>
·
Juan Pablo Isaza
1 answers
Answer question0
The Problem
Assume there are two divs with two different buttons on them.
<div onClick={handleOutter}>
<div onClick={handleInner}>
// some content ...
</div>
</div>
calling handleOutter will call the handleInner function. this is the default behavior of event propagation in your elements. more info on MDN documentation.
The Solution
You can stop event propagation in the child elements by adding event.stopPropagation() in the handler function in this way:
const btn = document.getElementById('myParentElement');
btn.onclick = function (event){
event.stopPropagation();
// ...
}
more info on MDN documentation.
·
Juan Pablo Isaza
Report
Answer question