Question

I have a page with “main tabs” which behaves as follows;
1. On hover of these, I show “sub tabs”
2. On click of any of the main tabs, it goes to one of the default sub tab pages.

$(".mainlink_href").mouseover(function(){...}

Now these behaves as expected on desktop browsers. But on the iPad, when user clicks on any of the main tabs, it always does the hover method execution i.e. shows the sub tabs and does not go the sub tabs page (as in the desktop)

Now I agree, that this is as per expected iPad behavior since there is no mouse cursor to track for hover event otherwise…

But is there any way that I can update the code such that “only for the iPad” it does not go through the hover method for the first click and instead does the click event and directly takes the user to the default sub tab page (i.e. similar to point 2 above in desktop browsers)

Please help me. Thank you.

Answer 1

You could just assign both event handlers, and have the ontouchstart handler remove the onmouseover handler.

$(".mainlink_href").mouseover(function(){...});
$(".mainlink_href").ontouchstart(function(){this.mouseover=function(){};});