iPad Safari's mapping of mouse events to touch

Question

My website makes extensive use of image-maps. The images are of pages from a medieval manuscript. The mouseOver event of the AREA tags has a tooltip attached to it, which displays a modern typographic transcription of the ancient script for the line the mouse is hovering over.

I just checked my website out on the iPad at the Apple store. The iPad is in many respects a joy to use, however, I am wondering about Apple's mapping of the mouse-events to the finger-touch events. Apple probably had a good reason for doing things as they did, but their choices seem counterintuitive and overly complicated to me.

Specifically, the iPad Safari browser clearly was responding to both fingerDown and fingerTap, and in different ways. When I tapped an area of the image-map, the tooltip wired to the mouse-over event of the AREA tag was displayed, and remained visible until I tapped somewhere else. When I held my finger down on an area of the image-map, the area changed color. So if iPad Safari detects a mouseOver eventhandler, it executes the mouseOver code on the click|tap and apparently prevents the "click" event from propagating, so that if you also have something wired to the click event, it doesn't work? Is that right?

But more importantly, why isn't fingerDown the iPad-Safari counterpart for mouseOver? FingerDown seems a more likely candidate than Tap when mapping the mouseOver event. I would have expected things to be mapped in this way:

 MouseClick : FingerTap (i.e. finger down and then immediately up)
 MouseOver : FingerDown (finger down and stays on the spot)

If Apple had treated fingerDown as the counterpart to mouseOver, then the tooltip could be displayed upon FingerDown and made invisible again on fingerUp, which would be the counterpart to mouseOut.

Perhaps someone could enlighten me about the thinking process that led Apple to these particular mouse-to-touch event-mappings? Thanks

Answer 1

I did find some information that partly explains the behavior described above:

https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

See section 5, especially.

It appears that the touch+hold is "selecting" the image-map area. The link above says that user-select can be disabled, but it doesn't say what happens when the touch+hold gesture is used on an element where user-select has been disabled. It would be great if it could become the counterpart to mouseOver under those circumstances.

Answer 2

I have been doing some research on specifically when the iPad fires "mouseover" events versus "click" events. When the user taps anywhere on the page the iPad first fires a "mouseover" event as though the user had just placed a mouse cursor on that spot. It also fires a "mouseout" event on the last element that had focus. The browser then, as far as I can tell, checks whether any changes to the DOM occurred as a result of "mouseover" event callback.

If there has been a change to the DOM the browser does not fire a "click" event. If the user taps on the same element a second time the browser does fire a "click" event but does not fire another "mouseover" event.

On the other hand, if after the user taps on an element for the first time and the DOM has not changed after the "mouseover" event completes, then the browser fires a "click" event without waiting for a second tap.