$(document).ready(function(){
    if (is_touch_device){
        $('#mainmenu > li > a').click(function(event) {
            event.preventDefault();
        });

//////////////////////////////////////////
// A click any where else hides the menu //
/////////////////////////////////////////
        $(':not(#mainmenu > li > a)').click(function(event) {
            $('#mainmenu > li > a').css('display','none');
        });

    }
});

function isTouchDevice(){
 return typeof window.ontouchstart !== 'undefined';
}

jQuery(document).ready(function(){
 /* If mobile browser, prevent click on parent nav item from redirecting to URL */
 if(isTouchDevice()) {
   // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
   jQuery("#menu-main-menu > li > a").click(function(event) {
      // Perform a reset - Remove the "clicked" class on all other menu items
     jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
      jQuery(this).toggleClass("clicked");
      if (jQuery(this).hasClass("clicked")) {
       event.preventDefault();
     }
   });
 }
});

Looks all okay here. May I know your IE version?

@Joshua Thank you for the creative solution 🙂

http://pastebin.com/P2A6bEu1

Clone the top level menu item into the sub-menu and add a class for that item. Then use a conditional to disable the links for menu items not with that class. That’s a lot of double negatives but here is the code (if it lets me include it):

function is_touch_device() {
  return !!('ontouchstart' in window);
}

jQuery(document).ready(function($) { 
  
  /* If mobile browser, prevent click on parent nav item from redirecting to URL */
  if(is_touch_device()) { 

    $('#main-menu li#your-menu-item-id').clone().prependTo('li#your-menu-item-id > ul.sub-menu').addClass('mobile-tl');

    $('#main-menu li:not(.mobile-tl) > ul').each(function (index, elem) {

      /* Option 1: Use this to modify the href on the <a> to # */
      $(elem).prev('a:first').attr('href' ,'#');

      /* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
      $(elem).prev('a:first').click(function(event) {
          event.preventDefault();
      });
    });
  }
  
});

The key here is using jQuery clone, adding the class and then using the conditional for that class to disable the links. The other key is using the pseudo selector :first as well. I’m sure this could be cleaned up a bit but it works.