In the last post we saw how we could easily work with mouse events on an iPad. Touchscreen devices like the iPad do not have a cursor, so the user cannot exactly move the mouse over an HTML element triggering a ‘mouseover’ event. One of the readers requested on how we could use a different interaction pattern on an iPad for a ‘mouseover’ event than on a desktop browser. For example in the following web page code the image-container class is attached to images div which displays a preview link overlay on mouseover.
(more…)
ipad
Making ‘mouseover’ event work on an iPad
Because of the way Safari on iOS creates events to emulate a mouse, some of your web page elements may not behave as expected on iOS. In particular, some elements that only use mouseover handlers need to be changed because iOS doesn’t recognize them as clickable elements, such as the div below. As the image-container div is not clickable in iOS, the corresponding mouseover event is not fired.
(more…)