title: two elements are fired while only one needs to be fired
body: <pre><code>&lt;div class="subitems"&gt;
    &lt;ul&gt;
        &lt;li id="China"&gt;&lt;/li&gt; 
           &lt;li id="India"&gt;
         India
         &lt;div id="subitems"&gt;
           &lt;ul&gt;
              &lt;li id="India/Sub Item 1"&gt;Sub Item 1&lt;/li&gt;
              &lt;li id="India/Sub Item 2"&gt;Sub Item 2&lt;/li&gt;
              &lt;li id="India/Sub Item 3"&gt;Sub Item 3&lt;/li&gt;
              &lt;li class="additem"&gt;+&lt;/li&gt;
           &lt;/ul&gt;
             &lt;/div&gt;
           &lt;/li&gt;
         &lt;li&gt;id="Austria"&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Like you would expect with this code:</p>
  
  <pre><code>$('.subitems ul li').mousedown(function (event) {
      if (event.which == 3) {
          alert('right mouse clicked');
      }
  });
  </code></pre>
  
  <p>is that when <code>India/SubItem1</code> is clicked, both the India <code>&lt;li&gt;</code> and the <code>India/SubItem1</code> <code>&lt;li&gt;</code> are fired, while I only want <code>India/SubItem1</code> to be fired. And when India is clicked I only want india to fire.</p>
  
  <p>How do I solve this?</p>