how to avoid jQuery UI draggable from also triggering click event [duplicate]

Question

A have a large div (a map) that is draggable via jQuery UI draggable. The div has child divs which are clickable.

My problem is that if you drag the map, on mouse up, the click event is fired on whatever child div you started the drag from.

How do I stop the mouse up from triggering the click event if its part of a drag (as opposed to someone just clicking without a drag, in which case the click event is desired).

Nacelle

I had the same problem and have found a simple solution. On the child element define draggable before click, like this: $('element').draggable({disabled: true}); – Sydelle

Answer 1

$('.selector').draggable({
    stop: function(event, ui) {
        // event.toElement is the element that was responsible
        // for triggering this event. The handle, in case of a draggable.
        $( event.originalEvent.target ).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

This works because "one-listeners" are fired before "normal" listeners. So if a one-listener stops propagation, it will never reach your previously set listeners.

Beeeater

jsfiddle.net/qYz9V/2 here is the fiddle of this answer :) thank you. – Wethington

the fiddle shows it's working, but for some reason it doesn't for me... – Chubb

This solution is not working in FF 31, event.toElement is undefined. However instead of event.toElement use event.originalEvent.target will work in all browsers – Isabellisabella

This doesn't work if the click event is attached to the child. – Logistic

This prevents the next real click to the target. I have to double click for the click to work again. – Holography

Answer 2

I had this problem and the solution is to apply the draggable event handler BEFORE the click event handler. I was moving some code around and suddenly had this problem. I finally realized I had switched the order in which I applied the handlers. When I switched it back, things started working properly again -- drag did not cause a click.

Locke

Arghh, I've been trying to fix this problem, and wish your solution worked for me. But it doesn't. I'm on jQuery 1.6.1 – Phrenology

Worked for me! Much better than all the shnanigans-ey other answers. – Regularly

none of which work for me :-( – Bobbysoxer

Worked for me like charm, just be sure to set the draggable event before the click event like mentiened... thank you for the solution :D – Greenwell

Still true 7 years later! :-) – Grania

Answer 3

Could you perhaps set a variable such as "justDragged = true" when starting the drag and then on the mouseUp event check this variable and if true, set it to false and then do a event.preventDefault + return w/o doing anything. This way it skips the first click after the drag. Seems kind of hackish, perhaps others will have a more elegant solution.

Volz

Answer 4

An alternative is to simply not allow dragging from clickable areas within the draggable:

jQuery UI Draggable API

Mccahill

Care to explain the downvotes? – Mccahill