Bug Tracker

Opened 8 years ago

Closed 8 years ago

#11485 closed bug (fixed)

Event degelation doesn't work with middle mouse click

Reported by: anonymous Owned by:
Priority: low Milestone: None
Component: event Version: git
Keywords: Cc:
Blocked by: Blocking:

Description

Fiddle: http://jsfiddle.net/ZgD2s/3/

On Google Chrome, the two directly bound functions of the following are fired when clicking the span element with the middle mouse button; the delegation one is not.

Pass:

$("span").on("click", function() { ... })

Pass:

$("body").on("click", function() { ... })

Fail:

$("body").on("click", "span", function() { ... })

All three functions are executed when clicking with the left mouse button, however.

Change History (4)

comment:1 Changed 8 years ago by sindresorhus

#11549 is a duplicate of this ticket.

comment:2 Changed 8 years ago by sindresorhus

Component: unfiledevent
Keywords: needsdocs added
Priority: undecidedlow
Status: newopen

Improved testcase: http://jsfiddle.net/mofle/cX59y/

The click event is intended for the left mouse button. The reason middle-click trigger the click event on some browsers is lack of specificity in the spec. You should use mousedown/mouseup instead.

WebKit is going to stop triggering the click event on middle-click: https://bugs.webkit.org/show_bug.cgi?id=22382 http://code.google.com/p/chromium/issues/detail?id=255

There seems to be a lot of differences between browsers:

Chrome 17: Mousedown and "click: direct"

Safari 5.1.4: Mousedown and "click: direct"

Firefox 11: Only mousedown

IE6: Only mousedown

IE7: Only mousedown

IE8: Mousedown and Click

IE9: Mousedown and Click

Firefox 3.6: Mousedown and Click

Opera: Mousedown and Click


We should document on the .on() page that mousedown/mouseup should be used for middle-click.

comment:3 Changed 8 years ago by dmethvin

@sindresorhus, thanks for finding that.

jQuery specifically stops right and middle clicks from bubbling because they don't occur on the element itself and that is confusing. I suspect that's why the browsers are coming around to doing the same.

So yes, it's a documentation issue at this point.

comment:4 Changed 8 years ago by addyosmani

Keywords: needsdocs removed
Resolution: fixed
Status: openclosed

Thanks again for the background info, @sindresorhus I've just updated the docs to address this: http://api.jquery.com/on/

If there's anything else we need to add, feel free to edit (or send rough notes my way and I can do it if needed).

Note: See TracTickets for help on using tickets.