Ok, I found out that my first fiddle is wrong. I found another example that does work and shows how the stopPropagation() work:
var divs = document.getElementsByTagName('div');
for(var i=0; i<divs.length; i++) {
divs[i].onclick = function( e ) {
e = e || window.event;
var target = e.target || e.srcElement;
//e.stopPropagation ? e.stopPropagation() : ( e.cancelBubble = true );
if ('bubbles' in e) { // all browsers except IE before version 9
if (e.bubbles) {
e.stopPropagation();
alert("The propagation of the event is stopped.");
} else {
alert("The event cannot propagate up the DOM hierarchy.");
}
} else { // Internet Explorer before version 9
// always cancel bubbling
e.cancelBubble = true;
alert("The propagation of the event is stopped.");
}
this.style.backgroundColor = 'yellow';
alert("target = " + target.className + ", this=" + this.className );
this.style.backgroundColor = '';
}
}
http://jsfiddle.net/MekZii/wNGSx/2/
The example is found at the following link with some reading material: http://javascript.info/tutorial/bubbling-and-capturing