jQuery mouse's .click() is launched by keyboard navigation

Question

I've found strange behavior of jQuery click event. If we are using keyboard navigation (accessibility case), click is launched by Enter or Space (it depends, which HTML element we are using ).

There is a test page on jsfiddle, You could try to navigate with keyboard in Result frame, and click is launched in different situations :

http://jsfiddle.net/DCXhN/9/

In jQuery manual, I have found following description of click event :

"The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event."

Is it normal ? How to intercept only mouse click events if it's normal behavior ?

Answer 1

Yes, this is normal. The JQuery documentation is correct, but a bit incomplete. There's more details on the WC3 site - eg:

Note: For maximum accessibility, content authors are encouraged to use the click event type when defining activation behavior for custom controls, rather than other pointing-device event types such as mousedown or mouseup, which are more device-specific. Though the click event type has its origins in pointer devices (e.g., a mouse), subsequent implementation enhancements have extended it beyond that association, and it can be considered a device-independent event type for element activation.

Or, put another way, for some elements, click() is essentially a logical event rather than a device-specific event.

If you really want to only respond to mouse input, you can use the mousedown/up events - but keep in mind you'll then have to make your UI keyboard accessible separately (eg. using keydown/press/etc events to provide a keyboard equivalent).