Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery live('click') firing for right-click

I've noticed a strange behaviour of the live() function in jQuery:

<a href="#" id="normal">normal</a>
<a href="#" id="live">live</a>

$('#normal').click(clickHandler);
$('#live').live('click', clickHandler);

function clickHandler() {
    alert("Clicked");
    return false;
}

That's fine and dandy until you right-click on the "live" link and it fires the handler, and then doesn't show the context menu. The event handler doesn't fire at all (as expected) on the "normal" link.

I've been able to work around it by changing the handler to this:

function clickHandler(e) {
    if (e.button != 0) return true;
    // normal handler code here
    return false;
}

But that's really annoying to have to add that to all the event handlers. Is there any better way to have the event handlers only fire like regular click handlers?

like image 631
nickf Avatar asked Sep 28 '09 23:09

nickf


People also ask

How does jQuery detect right click?

Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler to the default 'mousedown' JavaScript event. This can be used to trigger an event. The event object's 'which' property can then used to check the respective mouse button.

What is the use of live in jQuery?

jQuery | live() Method This method is used to attach one or more event handlers for the selected elements. It also specifies the function that runs when the event occurs. The event handlers used will work for both current and future elements matching the selector.

Why is this jQuery Ajax click event firing multiple times?

an Event will fire multiple time when it is registered multiple times (even if to the same handler).

How do you handle right click?

Set the window.contextmenu property to an event handler function to listen for right clicks on the page. We have the e parameter that has the right-click event object. We call e. preventDefault to stop the default behavior for right clicks, which is to show the context menu on the page.


2 Answers

It's a known issue:

It seems like Firefox does not fire a click event for the element on a right-click, although it fires a mousedown and mouseup. However, it does fire a click event on document! Since .live catches events at the document level, it sees the click event for the element even though the element itself does not. If you use an event like mouseup, both the p element and the document will see the event.

Your workaround is the best you can do for now. It appears to only affect Firefox (I believe it's actually a bug in Firefox, not jQuery per se).

See also this question asked yesterday.

like image 98
Crescent Fresh Avatar answered Sep 28 '22 19:09

Crescent Fresh


I've found a solution - "fix" the the live() code itself.

In the unminified source of jQuery 1.3.2 around line 2989 there is a function called liveHandler(). Modify the code to add one line:

2989:    function liveHandler(event) {
2990:        if (event.type == 'click' && event.button != 0) return true;

This will stop the click events from firing on anything but the left-mouse button. If you particularly wanted, you could quite easy modify the code to allow for "rightclick" events too, but this works for me so it's staying at that.

like image 36
nickf Avatar answered Sep 28 '22 18:09

nickf