CODEWITHSUNDEEP
javascriptjqueryjquery-events
Sara Goodarzi
Sara Goodarzi

Reputation: 237

Prevent click event after drag in jQuery

I have a draggable <div> with a click event and without any event for drag, but after I drag <div> the click event is apply to <div>.

How can prevent of click event after drag?

$(function(){
    $('div').bind('click', function(){
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});

http://jsfiddle.net/prince4prodigy/aG72R/

Upvotes: 13

Views: 23717

Answers (8)

xenon134
xenon134

Reputation: 73

I had the same problem (tho with p5.js) and I solved it by having a global lastDraggedAt variable, which was updated when the drag event ran. In the click event, I just checked if the last drag was less than 0.1 seconds ago.

function mouseDragged() {
    // other code
    lastDraggedAt = Date.now();
}

function mouseClicked() {
    if (Date.now() - lastDraggedAt < 100)
        return; // its just firing due to a drag so ignore
    // other code
}

Upvotes: 0

wantyouring
wantyouring

Reputation: 225

With React

This code is for React users, checked the draggedRef when mouse up.

I didn`t use click event. The click event checked by the mouse up event.

const draggedRef = useRef(false);

...

<button
  type="button"
  onMouseDown={() => (draggedRef.current = false)}
  onMouseMove={() => (draggedRef.current = true)}
  onMouseUp={() => {
    if (draggedRef.current) return;

    setLayerOpened(!layerOpened);
  }}
>
  BTN
</button>

Upvotes: 0

Anton Suslov
Anton Suslov

Reputation: 103

You can do it without jQuery UI draggable. Just using common 'click' and 'dragstart' events:

$('div').on('dragstart', function (e) {
  e.preventDefault();
  $(this).data('dragging', true);
}).on('click', function (e) {
  if ($(this).data('dragging')) {
    e.preventDefault();
    $(this).data('dragging', false);
  }
});

Upvotes: 2

Joe Lloyd
Joe Lloyd

Reputation: 22323

With an ES6 class (No jQuery)

To achieve this in javascript without the help of jQuery you can add and remove an event handler.

First create functions that will be added and removed form event listeners

flagged () {
    this.isScrolled = true;
}

and this to stop all events on an event

preventClick (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}

Then add the flag when the mousedown and mousemove events are triggered one after the other.

element.addEventListener('mousedown', () => {
    element.addEventListener('mousemove', flagged);
});

Remember to remove this on a mouse up so we don't get a huge stack of events repeated on this element.

element.addEventListener('mouseup', () => {
    element.removeEventListener('mousemove', flagged);
});

Finally inside the mouseup event on our element we can use the flag logic to add and remove the click.

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        e.target.addEventListener('click', preventClick);
    } else {
        e.target.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

In the above example above I am targeting the real target that is clicked, so if this were a slider I would be targeting the image and not the main gallery element. to target the main element just change the add/remove event listeners like this.

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        element.addEventListener('click', preventClick);
    } else {
        element.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

Conclusion

By setting anonymous functions to const we don't have to bind them. Also this way they kind of have a "handle" allowing s to remove the specific function from the event instead of the entire set of functions on the event.

Upvotes: 13

Philip
Philip

Reputation: 2988

You can just check for jQuery UI's ui-draggable-dragging class on the draggable. If it's there, don't continue the click event, else, do. jQuery UI handles the setting and removal of this class, so you don't have to. :)

Code:

$(function(){
    $('div').bind('click', function(){
        if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});

Upvotes: 0

Simon Steinberger
Simon Steinberger

Reputation: 6815

FIRST attach the draggable event, THEN the click event:

$(function(){
    $('div').draggable();
    $('div').click(function(){
        $(this).toggleClass('orange');
    });
});

Try it here: http://jsfiddle.net/aG72R/55/

Upvotes: 26

MightyPork
MightyPork

Reputation: 18861

I made a solution with data and setTimeout. Maybe better than helper classes.

<div id="dragbox"></div>

and

$(function(){
    $('#dragbox').bind('click', function(){
        if($(this).data('dragging')) return;
        $(this).toggleClass('orange');
    });

    $('#dragbox').draggable({
        start: function(event, ui){
            $(this).data('dragging', true);
        },
        stop: function(event, ui){
            setTimeout(function(){
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});

Check the fiddle.

Upvotes: 6

William Buttlicker
William Buttlicker

Reputation: 6000

This should work:

$(function(){

    $('div').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('div').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        $(this).toggleClass('orange');
    }
});
});

DEMO

Upvotes: 2

Related Questions