CODEWITHSUNDEEP
javascriptiphoneiosmouseover
Karptonite
Karptonite

Reputation: 1632

bypassing mouseover events for iOS

Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.

What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?

Upvotes: 2

Views: 1015

Answers (2)

Dim Panda
Dim Panda

Reputation: 69

Another solution is to use .mousemove() instead of .mouseover().

iOS ignores the .mousemove() event and triggers a click on the first touch.

Upvotes: 0

Theresa Summa
Theresa Summa

Reputation: 331

If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.

However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.

Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.

I realize that this is an old question - answering for the Googlers. :)

Upvotes: 2

Related Questions