为 iPad(触摸屏)提供"onClick"，为桌面用户提供默认功能

Question

希望有人能帮助我，我已经为此挣扎了一段时间。我需要为触摸设备上的最终用户提供"点击"下拉菜单以显示子菜单项的能力。就桌面体验而言，这显然是一种常见的用户体验结构，但就移动或触摸设备而言，这并不理想。我理解这一点，但在此期间仍需要提供这种经验作为临时解决方案。

话虽如此，我基本上是想找到一个简单的方法：

1. 检测用户是否在"触摸"设备上
2. 如果"true"，则允许他们点击下拉菜单链接以显示子菜单。允许此菜单保持（保持打开/显示），直到他们单击子菜单链接或在菜单区域之外（在下面的jsFiddle中，我能够让ontouchstart工作，但似乎不知道如何保持它，并使其适用于菜单中的所有标记链接）
3. 如果为"false"，则允许默认功能

以下是我迄今为止正在工作的jsFiddle：http://jsfiddle.net/bingles/hPJVM/18/

此外，以下是迄今为止的js代码：

var submenu = document.getElementsByTagName('a')[0];
if ("ontouchstart" in window) {
    submenu.ontouchstart = function() {
        $(".simple-tabs li.deep").addClass("deep-hover");
    };
    submenu.ontouchend = function() {
        $(".simple-tabs li.deep").removeClass("deep-hover");
    };
}
else {
    $(".simple-tabs li.deep").hover(
    function() {
        $(this).addClass("deep-hover");
    }, function() {
        $(this).removeClass("deep-hover");
    });
    $(".simple-tabs.live li").each(function(i) {
        var parent = $(this);
        if ($(this).hasClass("current")) {
            $(".simple-tab-" + i).fadeIn("fast");
        }
        $(this).find("a").click(function() {
            parent.parent().find("li").removeClass("current");
            parent.addClass("current");
            $(".simple-tab").hide();
            $(".simple-tab-" + i).show();
            return false;
        });
    });
}​

由于我还在学习jQuery，所以没有取得预期的进展。如有任何帮助或指导，我们将不胜感激！

提前谢谢。

Answer 1

您可以使用Modernizr来检测触摸功能

if (Modernizr.touch){
  // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
  // bind to normal click, mousemove, etc
}

您可以使用jQuery on（）将触摸事件添加为列表。例如

$('some selector').on('click touchstart touchend', function(e) {
        e.preventDefault();
        //show the menu
    });

和非接触

$('some selector').on('mouseover mouseout focusin focusout', function(e) {
        if (e.type === 'mouseover' || e.type === 'focusin') {
            //show the menu
        } else if (e.type === 'mouseout' || e.type === 'focusout') {
            //hide the menu
        }
    });

这些只需要包装在Modernizr.touch if/else。打开子菜单后，您可能需要在页面主体上进行触摸事件来关闭子菜单（以防有人打开它而没有单击菜单中的项目）。