How can I prevent a function with javascript

Question

I have two elements:

<div class="a" onclick="a();">a
 <div class="b" onclick="b();">b</div>
</div>

When I click a just alert a is coming, but when I click b I just want to see alert b.

I think this example explain me better.

http://jsbin.com/Aruciyi/1/edit?html,css,js,output

As on example how can I get just alert b by clicking red block...

Answer 1

Use event.stopPropagation, like this:

function b(event){
 event = event || window.event;
 event.stopPropagation();
 alert('b');
}

This traps the click event in the inner div and keeps it from bubbling up to the outer div.

ALSO: change your onclick attribute like this:

<div class="b" onclick="b(event);">b</div>

So you are explicitly passing the event object to the b function.

• mbultraslan: This does not work. I need to get alert b by clicking b (red) block.
• user2625787: @user2081672 Try now, I made a change.

Answer 2

The provided answers work, but I prefer to create one universal click function. I changed your classes to IDs so that getting them would be easier. Here's the code:

<div id="a" onclick="clickEvent(event, this);">a
 <div id="b" onclick="clickEvent(event, this);">b</div>
</div>

JavaScript:

function clickEvent(e, o) {
 alert(o.id);
 event = e || window.event;
 event.stopPropagation();
}

Here's a demo

• mbultraslan: the fuction did not work on IE I edited it as JavaScript: function b(){ try{ window.event.cancelBubble = true;} catch(err){} try{ event = event || window.event || e; event.stopPropagation();} catch(err){} alert('b'); } but now it not working on firefox