Reputation: 1144
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
<ul>
<li><span class="dragHandle"></span>Item 2 <a href="#">link</a></li>
</ul>
</li>
</ul>
I attach event handlers using jQuery as follows:
$(".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();
});
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?
TIA, Adam
Upvotes: 12
Views: 21419
Reputation: 45731
You could create a simple wrapper-"class", that keeps track of mouse-down and up events:
(function () {
var DragDropHandler = {
isDrag: false,
mouseDownHandler: function (event) {
alert("down");
event.stopPropagation();
this.isDrag = true;
},
mouseUpHandler: function (event) {
alert("Up");
event.stopPropagation();
this.isDrag = false;
},
clickHandler: function (event) {
event.stopPropagation();
// Check if we've already received a mouseDown-event. If we have,
// disregard the click event since we want drag-functionality
if(this.isDrag) { return; }
alert("click");
}
};
$(".tree li").click(function(event) {
DragDropHandler.clickHandler.call(DragDropHandler, event);
});
$(".dragHandle").mousedown(function(event) {
DragDropHandler.mouseDownHandler.call(DragDropHandler, event);
});
$(".dragHandle").mouseup(function(event) {
DragDropHandler.mouseUpHandler.call(DragDropHandler, event);
});
})();
This creates a closure and delegates the event handling to the DragDropHandler-object. Note that I've used function.call (the first parameter is the context) to ensure that this refers to the DragDropHandler-object inside its methods. Since we have created an anonymous function that can not be reached from global space, I think it's acceptable to use the DragDropHandler reference inside the wrapper event handlers.
Upvotes: 3
Reputation: 159698
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.
Upvotes: 16