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

Question

希望有人可以帮助我在这里,一直在努力解决这个问题.我需要为触摸设备上的最终用户提供"单击"drop-dwon菜单以显示子菜单项的功能.就桌面体验而言,这显然是一种常见的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中.您可能需要在页面主体上触摸事件,以便在打开子菜单后关闭子菜单(如果有人打开它并且没有单击菜单中的项目).