Geek Answers Handbook

Click event prevention after mousedown and mouseup events

Is it possible that jQuery will prevent the click event from executing from the same element after the mousedown and mouseup events have just been fired.

Any help / examples would be appreciated.

+7
source share
3 answers

In Chrome and Internet Explorer, not Firefox, however, disconnecting and reconnecting an element in mousedown or mouseup will prevent the click event from firing. In Internet Explorer, this trick does not double-click, though (in Chrome it does).

But I would not rely on this strange behavior, who knows if he will change at some point. In addition, be careful that detaching and reconnecting can also have side effects for children of the element being separated (reloading iframes, file fields reset, ...).

0
source

There is an inconvenient approach, which is to disable the button in multi-down and turn it on after a short period, for example, 100 ms. If a mouseup occurs during this period, the button will not be pressed.

$('#btn').on('click', function() { alert('clicked') }); $('#btn').on('mousedown', function() { var btn = $(this); btn.attr('disabled', 'disabled'); setTimeout(function() { btn.removeAttr('disabled'); }, 100); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <button id='btn'>Click me</button> </body>
0
source

Yes, it should be possible if you return false; in the mouseup handler because onclick is fired after mousedown and mouseup have occurred. This is possible in regular javascript, so it should work with jquery event handlers.

EDIT:

Returning a boolean value from the event handler should be really sufficient to consume the event. However, since it is very flaky in browsers, you should use the function to manually cancel the bubbling of events:

 event.stopPropagation();

where event is the parameter received by the event handler.

-4
source

More articles:


All Articles