javascript - 使悬停菜单适用于移动设备的最佳实践方法是什么？

Question

我环顾四周，但没有找到似乎是常见问题的答案。

我有一个在悬停时激活的基本下拉菜单(使用 jQuery 的 hoverintent 插件)。它适用于桌面浏览器，但对于不像 iPad 那样将悬停事件转换为点击的移动设备，它不起作用。这是现在的 Javascript:

$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(      
function() {
    $(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
    $(this).children('div').fadeToggle(fadeOutSpeed);
});

我的问题是:在移动设备上使用点击并在桌面上悬停下拉菜单的最简洁、问题最少的方法是什么？我有几个想法，但不确定是哪个:

1. 附加 onclick 事件并在每次点击时禁用悬停。

2. 检测悬停的能力(不确定这是如何完成的)并使用点击处理程序(如果可用)。

Answer 1

当有事件处理程序时，至少 iOS 会自动干扰 hover 事件，因此您必须点击一次 hover 事件，第二次点击任何 点击事件。

检测 hove 是微不足道的。检查客户端是否支持touch。如果有 touch，则没有 hover。

if ("ontouchstart" in document) {
    // touch only code
} else {
    // "desktop" code
}