yensdesign – Tutorials, Web Design and Coding

An important feature of Javascript you must know is the events propagation. This what makes is trigger all events to the parents when a child event is captured (like a bubble). So, if you click in a div element, the click will active the onclick event in the div parent, and in the grandparent… and so until the body element.

This can often be helpful, but many others can be a big trouble. Of course you can disable this feature with the code below:

[code language="Javascript"]
/*DISABLE EVENTS PROPAGATION*/
//IE
if(!e)
	window.event.cancelBubble = true;

//OTHER NAVIGATORS*
else if(e.stopPropagation) e.stopPropagation();
[/code]

You can view a little example so that you can see it in action after the break.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

The HTML layout

[code language="HTML"]


	
Normal behavior
	

		Parent
		
Child
	
	
Behavior by breaking event propagation
	

		Parent
		
Child
	
	


[/code]

The core.js file

[code language="Javascript"]
var divParent = document.getElementById("parent");
var divChild  = document.getElementById("child");
var divParent2  = document.getElementById("parent2");
var divChild2  = document.getElementById("child2");

divParent.onclick = function(e){
	alert("Parent click");
}

divChild.onclick = function(e){
	alert("Child click");
}

divParent2.onclick = function(e){
	alert("Parent click 2");
}

divChild2.onclick = function(e){
	alert("Child click 2");
	/*DISABLE EVENTS PROPAGATION*/
	//IE
	if(!e)
		window.event.cancelBubble = true;

	//OTHER NAVIGATORS*
	else if(e.stopPropagation) e.stopPropagation();
}
[/code]

Download and Try it yourself

And that’s all guys. As always you can test the working demo and download the files of the tutorial here.

Well guys I want to tell you that we will begin a new kind of articles called interviews and the first one will be really really interesting for those javascript lovers

Thanks for all guys, yesterday we have reached a new unique visitors record and to celebrate it we are sending more invitations to test private beta of Plusmusica.com an online jukebox, if somebody is interested on try it just post a comment or send us an e-mail!

Cheers!