JQuery event.stopPropagation() not working
<p>In my html I have a span of class dragHandle embedded within a li. </p>

<pre><code>&lt;div class='treeView'&gt;
    &lt;ul class='tree'&gt;
     &lt;li&gt;&lt;span class="dragHandle"&gt;&lt;/span&gt;Item 1
      &lt;ul&gt;
       &lt;li&gt;&lt;span class="dragHandle"&gt;&lt;/span&gt;Item 2 &lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
     &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I attach event handlers using jQuery as follows:    </p>

<pre><code>$(".tree li").click(function(event) {
     alert("click");
     event.stopPropagation();
    });

    $(".dragHandle").mousedown(function(event) {
     alert("down");
     event.stopPropagation();

    });

    $(".dragHandle").mouseup(function(event) {
     alert("Up");
     event.stopPropagation();

    });
</code></pre>

<p>When I mousedown and mouse up over the element I get the down and up alerts, however I also get the click alert of the li's event handler too. I thought that this should be prevented from by the call to event.stopPropagation in the mousedown and mouseup handlers. How do I stop the click event being called for mousedown/up events on the dragHandle?</p>

<p>TIA,
Adam</p>
