title: Why does e.stopPropagation() not work?
body: <p>I am reading a book called "Adaptive Web Design" by Aaron Gustafson were I got a piece of javascript that I didnt understand. While researching I find out about the difference between returning false and e.preventDefault. I also now know a little bit about the bubbeling effect of JavaScript and came to understand that to stop the bubbeling you can use e.stopPropagation() (in none-ie browser atleast).</p>
  
  <p>I was playing around in fiddle but I couldnt get it working. I think it might got to do with the way the bubbeling takes effect (from root to the element and back?).</p>
  
  <pre><code>document.body.onclick = function (e) {
      alert("Fired a onclick event!");
      e.preventDefault();
      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.");
      }
  }
  </code></pre>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/MekZii/pmekd/" rel="nofollow">http://jsfiddle.net/MekZii/pmekd/</a> (FIXED link)
  EDIT:
  I copy-pasted the wrong link! Its fixed now!</p>
  
  <p>So what I would like to see is that when you click on the anchor, the onclick that is used on the div doesn't get executed (this is not a practical case, just a study case!)</p>