javascript - jQuery hover event on <a> tag on mobile devices

Question

The jQuery .hover() event seems to work fine on mobile devices (testing it on iOS 5.1 Safari) as long as it's not on a anchor element <a>. Work fine means it will trigger the hover handler that is bound on it.

But, when the hover event is on <a>, the browser is redirected to the URL from href instead.

I want it to hover first on first touch (run the event handler) before it's being redirected (trigger the click) on second touch. Is there any way of doing this?

Answer 1

You must add an event handler to the link that changes something about the DOM (like toggling a class to change background colors, etc.)

From the Mobile Safari docs:

Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content