Grow your CSS skills. Land your dream job.

Return false works for click — not mousedown?

  • # October 8, 2013 at 12:43 pm

    I recently discovered an issue with preventing default behavior or returning false using jQuery .mousedown() . Below are 2 test cases I’ve made; the first using click and the second mousedown. The first test executes properly…returning false and removing the #hash from the url. The second using mousedown fails, and the hash remains in the url.

    Any ideas why click works, but mousedown doesn’t?

    Edit: I’m thinking this happens because a click event is firing immediately after the mousedown. So essentially both mousedown AND click will fire when using mousedown. To fix this, you must also return false for click. Am I on the right track?

    Test Click: http://jsfiddle.net/VLZzY/show

    Test Mousedown: http://jsfiddle.net/6CdRZ/show

    Updated : http://jsfiddle.net/XHDTF/show

    # October 8, 2013 at 1:14 pm

    What is the default behaviour of mousedown?

    A click is essentially a two stage process isn’t it,a mousedown followed by a mouseup….isn’t it?

    I confess I’m a noob at this stuff.

    # October 8, 2013 at 1:51 pm

    From what I understand…

    The mousedown event will fire immediately when the mouse is pressed down, even without releasing the button.

    The click event will fire only after releasing the mouse button. (similar to mouseup)

    So in my second test sample, both mousedown and click are firing. To prevent default behavior for mousedown, you also have to return false for click.

    # October 14, 2013 at 1:09 pm

    http://jsfiddle.net/6CdRZ/2/

    http://jsfiddle.net/VLZzY/2/

    Mousedown and click have different functions. Try and highlight the test in both examples. Also, you should be using preventDefault() and not return false, since return false also does stopPropagation()` and that probably isn’t your intention.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".