Click events on overlapping items

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.

Answer 1

look at your code this is what you should do in the button click event stopPropagation

Answer 2

Using jQuery (due to question tag):

$('#yourButton').click(function(e) {
    // stop event from bubbling up to row element
    e.stopPropagation();

    // now do your stuff
});

Answer 3

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.