These are touch events in HTML image maps supported by iOS / Mobile Safari.

Question

Can someone tell me finally if the html image cards support touch events in Mobile Safari? I need to use image maps because I have clickable areas that are irregular in shape. My testing shows that mouse events are supported (but in a limited way), and that touch events do not fire at all.

I did this simple test:

http://jsfiddle.net/DsRhu/6/

<img id="polygon_images" src="http://s18.postimg.org/7xvo1f9tl/polygons.png" alt="Polygons" border="0" usemap="#my_polygons" /> <map id="my_polygons" name="my_polygons"> <area shape="poly" alt="blue" title="Mouse" coords="95,40,171,99,139,189,37,188,14,96" onmousedown="writeMessage(event, 'm-down');" onmouseup="writeMessage(event, 'm-up');" onmousemove="writeMessage(event, 'm-move');" onmouseout="writeMessage(event, 'm-out');" /> <area shape="poly" alt="red" title="Touch" coords="269,42,345,96,317,191,215,189,193,97" ontouchstart ="writeMessage(event, 't-start');" ontouchend="writeMessage(event, 't-end');" ontouchmove="writeMessage(event, 't-move');" ontouchcancel="writeMessage(event, 't-cancel');" /> </map> <div id="message_box"></div> 

The blue polygon is attached to mouse events. The red polygon is equipped for touch events.

When I view this page in normal Safari , clicking or hovering over the blue polygon fires events as I expected. And of course, the red polygon does nothing (since touch events are not supported on the desktop)

However , when I look at this page on my iPad , the blue polygon launches the mousemove, mousedown, mouseup triplet on one tap and nothing else. Worse, touching the red polygon does nothing!

I totally hope that I just missed something simple, but if not, I really would like to know exactly what is going on.

Answer 1

Several months passed, and no one else gave a more definitive answer, so I decided that it was best to answer my own conclusions:

1) Touch events on image cards. It does not seem to be supported on mobile safari at all.

2) Although mouse events are supported , they do not provide enough control to make anything more than one choice (as I mentioned above, shooting mousemove, mousedown and mouseup all at once) - and even then it is not so responsive as I would like (or anyone;).

Decision:

I put the image inside the div tag (which supports all touch events), and then performed my own hit detection based on the original image map data.

Not the perfect solution, but it works and works well. Hope this helps someone else ...