title: React and jQuery event handler's fired in wrong order
body: <p>I'm creating menu that appears at the top of the screen. When user clicks one of menu items div with a lot of links appear. I wan't to be able to hide this div by clicking another menu item (no problem, already implemented it) but also by clicking anywhere else then this div and menuitems.</p>
  
  <p>I heard about two solutions:</p>
  
  <ul>
  <li>Show invisible div that is behind the menu and covers whole screen
  and add click handler to it.</li>
  <li>Attach event handler to document.body.</li>
  </ul>
  
  <p>First one is not good for me because that div will cover links that are on the page and I want them to be clickable even after menuitem is clicked and it's corresponding div appeared. So I tried second soultion. But the problem is that jquery click handler on body is fired before my component's handler. I have no idea how to make it first call my components handler and then prevent event propagation.</p>
  
  <p>Here is the code and js fiddle:</p>
  
  <pre><code>/** @jsx React.DOM */
  var Menu = React.createClass({
      click: function(e) {
          console.log('component handled click - should be called before jquery one and prevent jquery handler from running at all');
          e.stopPropagation();
      },
      render: function(){
      console.log("component renders");
          return (
              &lt;div&gt;
                  &lt;div&gt;| MenuItem1 | MenuItem2 | MenuItem 3 |&lt;/div&gt;
                  &lt;br /&gt;
                  &lt;div className="drop"&gt;
                      MenuItem 1 (This div appears when you click menu item)
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" onClick={this.click}&gt;Item 1 - when I click this I don't want document.body.click to fire&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" onClick={this.click}&gt;Item 1 - when I click this I don't want document.body.click to fire&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  
  React.renderComponent(&lt;Menu /&gt;, document.getElementById("menu"));
  
  $(document).ready(function() {
      console.log('document is ready');
      $("body").click(function() {
          console.log('jquery handled click - should not happen before component handled click');
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/psonsx6j/" rel="noreferrer">http://jsfiddle.net/psonsx6j/</a></p>
  
  <p>startup console before you run it for explanation of problem</p>