jQuery 同时容纳 HOVER 和 FOCUS（鼠标和键盘）答案

【问题标题】：jQuery accommodating both HOVER and FOCUS together (mouse and keyboard)jQuery 同时容纳 HOVER 和 FOCUS（鼠标和键盘）
【发布时间】：2010-01-12 21:04:22
【问题描述】：

我正在构建一个大型菜单，我希望能够通过悬停（使用鼠标）和焦点（例如通过键盘切换到它）来触发菜单。

这就是我目前正在做的事情：

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

这可行，但我想知道这是否是同时处理键盘和鼠标交互的理想方式。

【问题讨论】：

标签： jquery hover keyboard-events

【解决方案1】：

您可以使用 bind 方法将多个事件绑定到一个操作，即

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

【讨论】：

够简单！那肯定更简洁。从性能的角度来看是否也更有效？
我认为 JQuery 以最有效的方式处理它
现在看起来像 jQuery 1.7+ prefers，您使用 .on() 而不是 .bind()。不过，对于这个答案，语法几乎相同。只需将bind 替换为on，因此：$('.megaMenu-trigger').on("mouseenter focus mouseleave", function(event) { console.log(event.type); });

【解决方案2】：

您的问题的答案是 UI 设计决策。

鼠标悬停或 Tab 键是否应该始终优先于另一个？
还是应该与时间相关，最近的事件优先？
相反的做法是将菜单保持打开状态并禁用其他事件，直到菜单关闭。

我的 Mac OS 的工作方式似乎是最近的事件。也许一些网页设计师决定走不同的路线？

【讨论】：

嗯，是的，还有更多细节需要考虑……特别是什么会触发菜单关闭。值得深思！