How to stop event delegation(obvious fact #12132)

This was a question I got in the office today and there is no shame in asking it:

I am using Event Delegation on one of my products and I need to stop the main handler on the body from firing when I click a certain button. How do I do that?

The answer is of course to use stopPropagation() or cancelBubble(), both nicely wrapped in YAHOO.util.Event.stopPropagation():

HTML:

JavaScript:

YAHOO.util.Event.onContentReady(‘buttons’,function(){

YAHOO.util.Event.on(document.body,’click’,function(e){

var t = YAHOO.util.Event.getTarget(e);

snitch(‘
It was the ’ + t + ’ that was clicked
‘);

});

YAHOO.util.Event.on(‘tease’,’click’,function(e){

snitch(‘
that was the first button
‘);

YAHOO.util.Event.stopPropagation(e);

});

YAHOO.util.Event.on(‘tease2’,’click’,function(e){

snitch(‘
that was the second button
‘);

});

function snitch(msg){

document.getElementById(‘littlesnitch’).innerHTML += msg;

}

	
});

Try it out here: Overriding Event Delegation with stopPropagation

Tags: eventdelegation, events, javascript, webdevtrick