1.a
======================
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#main_nav a").bind('touchstart', function () {
console.log("touch started");
});
2.a
=====================
<ul>
<li><a href = "link">One</a></li>
<li><a href = "link">Two</a></li>
<li><a href = "link">Three</a>
<ul>
<li><a href = "link">sub One</a></li>
<li><a href = "link">sub Two</a></li>
</ul>
</li>
<li><a href = "link">Four</a></li>
3.a
======================
//Original events for desktop/non-mobile devices
$('#main_nav > li > a').bind('mouseenter', jsddm_open);
$('#main_nav > li').bind('mouseleave', jsddm_timer);
//test for existance of device
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
//bind the touchstart event to the link element
$("#main_nav > li > a").bind('touchstart', function(e){
//test to see if the sub menu is visibile, If not show sub menu, if it is visible, grab link from the a tag and navigate there.
$vis = $(this).parent().find('ul').css('visibility');
if ($vis == "visible"){
var el = $(this);
var link = el.attr('href');
window.location = link;
//test to see if the element has a sub menu, if it has no sub menu react normally and go to link
} else if($(this).parent().find('ul').attr('class')){
//most important! disable the click on the link so it wont redirect you
e.preventDefault();
//show sub menu
ddmenuitem = $(this).parent().find('ul').css('visibility', 'visible');
}
});
//this was just for testing
$(".menu li a").bind('touchend', function(){
console.log("touch ended");
});
}
Ok so recently I noticed that iOS has changed all of their touchevent reactions when it comes to the mobile browser. I know we used to all add that quick fix code before, something like
moved to 1.a above
Which worked perfectly fine. It seems now that they tried to over fix the problem and made it so that when you click an element it automatically triggers it's event, not it's hover/mouseenter. I ran into this issue when a site I created had a navigation that used jquery for it's dropdowns had a top level nav element that was also a link. The markup was something like...
moved to 2.a above
And what was happening was that when I'd click "Three" on the iPad which normally would trigger my "mouseenter" event it was triggering the default click event which was sending me to the specified link. This made having the drop down below it impossible. I googled forever and found nothing so what I did is written in the code (3.a)... But ultimately is there an easier/cleaner solution to this or are we all just on hold until there is? I did notice that pure CSS dropdowns work normally but lose the sweet jQuery pizazz