Click events on overlapping items
-
19-09-2019 - |
Question
I have
- table row with click event
- button with click event, that button is on table row
and I have problem. When I hit button, row click event execute too, but I don't want this behavior. I want only button click execute, without row click.
Solution
look at your code this is what you should do in the button click event stopPropagation
OTHER TIPS
Using jQuery (due to question tag):
$('#yourButton').click(function(e) {
// stop event from bubbling up to row element
e.stopPropagation();
// now do your stuff
});
You can call an extra function onClick
this is the function:
function cancelBubble(e){
e.cancelBubble = true;
if(e.stopPropagation)
e.stopPropagation();
}
And button's onClick you can write like
onclick="yourfunctionname();cancelBubble(event)"
yourfunctionname:: is the name of your function you are already calling.
Also I had a dropdown overlayed on a clickable element. So just use the following to prevent propagation to the underlying element for all modern browsers
onclick="yourfunctiontohandle();event.stopPropagation();"
For older cross browser solution, must use IE event.cancelBubble
onclick="if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true;"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow