Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  74] [ 6]  / answers: 1 / hits: 21458  / 15 Years ago, sun, july 26, 2009, 12:00:00

In my html I have a span of class dragHandle embedded within a li.

<div class='treeView'>
<ul class='tree'>
<li><span class=dragHandle></span>Item 1
<li><span class=dragHandle></span>Item 2 <a href=#>link</a></li>

I attach event handlers using jQuery as follows:

$(.tree li).click(function(event) {

$(.dragHandle).mousedown(function(event) {


$(.dragHandle).mouseup(function(event) {


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?


More From » jquery


How do I stop the click event being called for mousedown/up events on the dragHandle?

You capture... and eat... that event:

$(.dragHandle).click(function(event) { event.stopPropagation(); });

The key here is that click, mousedown, and mouseup are distinct events. Although you might think of a click as being a mousedown followed by a mouseup, in reality you might have click events triggered by user actions that don't even involve the mouse, as well as combinations of mousedown and mouseup that don't result in any click events at all.

[#99055] Tuesday, July 21, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 86
Total Questions: 114
Total Answers: 111

Location: Wales
Member since Mon, May 17, 2021
3 Years ago
clifford questions
Sat, Dec 18, 21, 00:00, 2 Years ago
Thu, Mar 18, 21, 00:00, 3 Years ago
Thu, May 7, 20, 00:00, 4 Years ago