Providing "onClick" for iPad (touchscreens) and default functionality for desktop users

Question

Hoping someone can help me out here, been struggling with this for a little bit. I have the need to provide end users on a touch device the ability to "click" a drop-dwon menu to expose the submenu items. This is obviously a common UX construct in terms of the desktop experience, but in regards to mobile or touch devices, it is less than ideal. I understand this, but still need to offer this experience in the meantime as a temporary solution.

Having said that, I am basically trying to find a simple way to:

1. Detect if a user is on a "touch" device
2. If "true" than allow them to tap the drop-down menu link in order to expose the sub-menu. Allow this menu to persist (remain open/shown) until they click a sub-menu link or outside of the menu area (in the jsFiddle below I am able to get the ontouchstart to work, but can't seem to figure out how to persist it and make it work for ALL a tag links in the menu).
3. If "false", allow default functionality.

Here is the working jsFiddle I have so far: http://jsfiddle.net/bingles/hPJVM/18/

Also, here is the js code thus far:

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;
        });
    });
}​

Haven't been able to make as much headway as hoped since I am still in the process of learning jQuery. Any help or guidance would greatly be appreciated!

Thanks in advance.

Answer 1

You can use Modernizr to detect for the touch capability

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

You can add the touch events using jQuery on() as a list. e.g.

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

and for non-touch

$('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
        }
    });

These just need wrapping in the Modernizr.touch if/else. You will probably need touch events on the body of the page to close the sub menu once it is opened (in case someone opens it and doesn't click on an item in the menu).