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

Question

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.

Answer 1

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); }); 

Answer 2

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?