CODEWITHSUNDEEP
jqueryhoverkeyboard-events
DA.
DA.

Reputation: 40671

jQuery accommodating both HOVER and FOCUS together (mouse and keyboard)

I'm building a mega menu where I want to be able to trigger the menu via both a hover (using the mouse) and focus (such as tabbing to it via the keyboard).

This is what I'm presently doing:

$(".megaMenu-trigger").focus(function (){$(this).hover()});
$(".megaMenu-trigger").hover(function(){
    // do the stuff
});

This works, but am wondering if that's the ideal way to handle both keyboard and mouse interactions together.

Upvotes: 3

Views: 13259

Answers (2)

Derek Litz
Derek Litz

Reputation: 10897

The answer to your problem is a UI design decision.

  • Should mouse hover or tabbing always take precedence over the other?
  • Or should it be time related where the most recent even takes precedence?
  • The opposite would to maintain the menu as open and disable other events until the menu is closed.

The way my Mac OS seems to work is the most recent event. Perhaps some web designers decided to go a different route though?

Upvotes: 1

Aly
Aly

Reputation: 16255

you can use the bind method to bind multiple events to one action i.e.

$('.megaMenu-trigger').bind("mouseenter focus mouseleave", 
        function(event) { console.log(event.type); });

Upvotes: 13

Related Questions