How does HTML mouseover work on apple multitouch devices


I asked about this in connection with this network of websites, but it brings up a more general question that I don't know the answer to.

Is it a problem that mouse over events are not able to be invoked by apple touchscreen – especially in regard to website rollovers?

Is there a way around this?


Best Answer

  • The way around this is to use a mouseover handler on a "clickable element", as Apple explain in their Web Content Guide:

    Mouse events are delivered in the same order you'd expect in other web browsers [...]. 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.

    Tapping once on a clickable element that has mouseover/mousemove content displays that content. Tapping a second time does mousedown/mouseup/click.

    A "clickable element" is:

    a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers.

    Therefore to fix the spoiler rollovers they would have to change using CSS to Javascript (i.e. use a mouseover handler on the blockquote, rather than a CSS class).

    (Apple has patent applications for detecting hovering on touch interfaces, so this could go away in the future. However, it's unlikely that will be soon).