How to stop event delegation(obvious fact #12132)
Monday, June 9th, 2008This 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:
<form id="buttons">
<p><input id="tease" type="button" value="click me, wuss!"></p>
<p><input id="tease2" type="button" value="click me, wuss! (I bubble)"></p>
<div id="littlesnitch"></div>
</form>
YAHOO.util.Event.onContentReady('buttons',function(){
YAHOO.util.Event.on(document.body,'click',function(e){
var t = YAHOO.util.Event.getTarget(e);
snitch('<p>It was the ' + t + ' that was clicked</p>');
});
YAHOO.util.Event.on('tease','click',function(e){
snitch('<p>that was the first button</p>');
YAHOO.util.Event.stopPropagation(e);
});
YAHOO.util.Event.on('tease2','click',function(e){
snitch('<p>that was the second button</p>');
});
function snitch(msg){
document.getElementById('littlesnitch').innerHTML += msg;
}
});
Try it out here: Overriding Event Delegation with stopPropagation
[tags]events,javascript,eventdelegation,webdevtrick[/tags]
