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:

  <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>

JavaScript:

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

• March 18th, Roosevelt Hotel NYC, US, AjaxWorld - talking about Building large web applications with the YUI
• March 21st - March22nd, Montreal, Quebec - Nurun workshop on Accessibility
• April 3rd, Scotland, Highland Fling, Scotland - Sharing the joy - building badges for distribution
• April 25th (one day shy of my birthday), London, AbilityNet’s “Accessibility 2.0: a million flowers bloom” - right and wrong implementation of accessibility

Planned talks (need confirmation)

• Ajax Experience 2008 - sent in “the human factor in web applications” and “YUI for control freaks” as proposals
• Tech conference about the future of web development in Beijing

Past talks
* February 12th, London Trocadero Beers and innovation #13 - A panel that chats about the changes of relationships between developers and designers (costs £25 though, didn’t know that)
* February 20th, somewhere in Leeds GeekUp - talking about the YUI

This page is not microformatted as I am a lazy bastard and want a Wordpress plugin