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

Question

希望有人能帮我解决这个问题，为此我苦苦挣扎了一会儿。我需要为触摸设备上的最终用户提供“单击”下拉菜单以显示子菜单项的能力。就桌面体验而言，这显然是一种常见的 UX 构造，但对于移动或触摸设备而言，它并不理想。我理解这一点，但仍需要同时提供此体验作为临时解决方案。

话虽如此，我基本上是想找到一种简单的方法来:

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 中。您可能需要页面主体上的触摸事件来关闭打开的子菜单(以防有人打开它但没有点击菜单中的项目)。