I'm trying to prevent a click event from firing if the mouse is moved after the 'mousedown' event. Currently I'm doing everything manually via conditionals and booleans. I still don't have it working how I want, and I feel it's just a poor approach to acplishing this.

var mousemove = false;
var mousedown = false;
var cancelClick = false;

$('.example').click( function() {
    if (!cancelClick) {
        if ( $(this).attr('id') === 'example-green') {
            $(this).attr('id', 'example-blue');
        } else {
            $(this).attr('id', 'example-green');
        }  
    }
    cancelClick = false;
});

$('.example').mousedown( function() {
    mousedown = true;
});

$('.example').mouseup( function() {
    if (mousemove) {
        cancelClick = true;
    }
    mousedown = false;
    mousemove = false;
});

$('.example').mousemove( function() {
    if (mousedown) {
        mousemove = true;
    }
});

/

Is there is a simpler way to achieve this? Preferably one that prevents the click events from being processed, or removes them from the pending event queue (I'm not sure if they are queued until after you release the mouse). That way the callbacks themselves aren't coupled with the implementation of this.

I'm trying to prevent a click event from firing if the mouse is moved after the 'mousedown' event. Currently I'm doing everything manually via conditionals and booleans. I still don't have it working how I want, and I feel it's just a poor approach to acplishing this.

var mousemove = false;
var mousedown = false;
var cancelClick = false;

$('.example').click( function() {
    if (!cancelClick) {
        if ( $(this).attr('id') === 'example-green') {
            $(this).attr('id', 'example-blue');
        } else {
            $(this).attr('id', 'example-green');
        }  
    }
    cancelClick = false;
});

$('.example').mousedown( function() {
    mousedown = true;
});

$('.example').mouseup( function() {
    if (mousemove) {
        cancelClick = true;
    }
    mousedown = false;
    mousemove = false;
});

$('.example').mousemove( function() {
    if (mousedown) {
        mousemove = true;
    }
});

http://jsfiddle/aGf6G/4/

Is there is a simpler way to achieve this? Preferably one that prevents the click events from being processed, or removes them from the pending event queue (I'm not sure if they are queued until after you release the mouse). That way the callbacks themselves aren't coupled with the implementation of this.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 30, 2014 at 0:50 kbirk asked May 29, 2014 at 23:15 kbirkkbirk 4,02299 gold badges5151 silver badges7676 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would just store the x/y coordinates of the mouse on mousedown and pare it to the current coordinates in click.

$('.example')
   .on('mousedown', function() {
        $(this).data("initcoords", { x: event.clientX, y: event.clientY });
    })
   .on('click', function() {
        var initCoords = $(this).data("initcoords") || { x: 0, y: 0 };

        if (event.clientX === initCoords.x && event.clientY === initCoords.y) {
            if ( $(this).attr('id') === 'example-green') {
                $(this).attr('id', 'example-blue');
            } else {
                $(this).attr('id', 'example-green');
            }  
            $(this).data('initcoords', {x:-1, y:-1});
        }
    });

http://jsfiddle/zp2y2/8/

---

You could also toggle the click event on and off. It is a little more concise but I wonder about the overhead of setting up event handlers pared to the method above.

$('.example')
    .on('mousedown', function() { $(this).one("click", handleClick); })
    .on('mousemove mouseout', function() { $(this).off('click'); });

function handleClick(){
    var $el = $('.example');
    if ( $el.attr('id') === 'example-green') {
        $el.attr('id', 'example-blue');
    } else {
        $el.attr('id', 'example-green');
    }  
}

http://jsfiddle/du7ZX/

EDIT: http://api.jquery./event.stopimmediatepropagation/ Here is one that stops all events on one element from executing except the one you want.

If the differnt events are not all on the same element but rather spread among child/parent you could:

Event.stopPropagation() will stop all other events except the one you actually want.

I believe this here is your solution: http://api.jquery./event.stoppropagation/

Here is a jsfiddle to actually test with and without stopPropagation: In this example I show how a div within a div inherits the event from his parent. Notice in the second example if you mouse over the inner div first, you will get two alerts. If you mouseover the inner div in the first example you will only get one alert.

http://jsfiddle/Grimbode/vsKM9/3/

/** test with stopprogation **/
$('#test').on('mouseover', function(event){
    event.stopPropagation();
    alert('mouseover 1');
});
$('#test2').on('mouseover', function(event){
    event.stopPropagation();
    alert('mouseover 2');
});

/*** test with no stoppropagation ***/
$('#test3').on('mouseover', function(event){
    alert('mouseover 3');
});
$('#test4').on('mouseover', function(event){
    alert('mouseover 4');
});

You could also use .off() method that removes events on a specific element.

Here's another option, I tested it and it works well:

$('.example')
   .on('mousedown', function() {
        $(this).data("couldBeClick", true );
    })
   .on('mousemove', function() {
        $(this).data("couldBeClick", false );
    })
   .on('click', function() {
        if($(this).data("couldBeClick")) {

            alert('this is really a click !');
        }
    });