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.

Attachments (0)

Change History (4)

Changed April 03, 2012 10:27PM UTC by sindresorhus comment:1

#11549 is a duplicate of this ticket.

Changed April 04, 2012 12:15AM UTC by sindresorhus comment:2

component:	unfiled → event
keywords:	→ needsdocs
priority:	undecided → low
status:	new → open

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.

Changed April 04, 2012 12:31AM UTC by dmethvin comment:3

@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.

Changed April 12, 2012 10:50PM UTC by addyosmani comment:4

keywords:	needsdocs
resolution:	→ fixed
status:	open → closed

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).

Side navigation