When you are adapting web apps to touchscreen devices particular
challenges come up around events like
Touchscreen devices like the iPad do not have a cursor, so the user
cannot exactly move the mouse over an HTML element. However, Mobile
Safari, the web browser that comes with the iPhone and iPad, has
a fallback for websites that require hovering or cursor movement.
Usually when you tap on an element on a link or other clickable element
Mobile Safari translates that into a regular
click event. The browser
also produces some touch events that do not exist in a lot of browsers.
But from the perspective of a web page that was not designed with
a touchscreen in mind, what you get is a plain
specifically, the browser fires
that order. But if a clickable element also does something on
mouseover then tapping on that element will trigger a
instead of a
click. Tapping on the same element again will produce
click event. A random example of a page that exhibits this behavior
is the schedule page from the Open Source Bridge
website. Try tapping on session titles and see what happens.
Mobile Safari will only produce mouse events when the user taps on
a clickable element, like a link. You can make an element clickable by
adding an onClick event handler to it, even if that handler does
nothing. On tap Mobile Safari fires the events
click in that order - with
some caveats which are explained below. Those events all fire together
after the user lifts her finger. You might expect the
to fire as soon as the user presses her finger to the screen - but it
does not. When the user taps on another clickable element the browser
mouseout event on the first element in addition to firing the
aforementioned events on the new element.