iOS/Mobile Safari是否支持HTML图像映射中的触摸事件？

Question

有人能告诉我，HTML图像映射是否在移动版Safari支持触摸事件？ 我需要使用图像映射，因为有不规则形状的可点击区域。 我的测试显示，鼠标事件得到了支持（但是受限），而触摸事件似乎根本没有被触发。 我进行了最简单的测试：在这里查看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>

蓝色多边形用于鼠标事件。红色多边形用于触摸事件。

当我在Safari浏览器上查看此页面时，点击或悬停在蓝色多边形上会像预期的那样触发事件。当然，红色多边形什么也不做（因为桌面设备不支持触摸事件）。

但是，当我在iPad上查看此页面时，单击蓝色多边形会触发一组mousemove、mousedown、mouseup事件，而没有其他操作。更糟糕的是，触摸红色多边形什么都不会发生！

我真的希望我只是错过了一些简单的东西，但如果不是这样，我真的很想确切知道发生了什么。

- g-dog

Answer 1

已经过了几个月，没人给出更明确的答案，所以我想最好回复一下我的发现:

1) 在移动版Safari上，触摸事件在图像映射中似乎根本不被支持。

2) 即使支持鼠标事件，它们也不能提供足够的控制来执行除单个选择之外的任何操作(如我之前提及的，同时触发mousemove、mousedown和mouseup)--即使这样反应速度也不如我(或其他任何人 ;) )想要的快。

解决方法:

我最终将图像放在

标签中(它支持所有的触摸事件)，然后根据原始图像映射数据自己进行命中检测。

虽然不是最理想的解决方案，但它却起到了作用，并且表现良好。希望能帮助到其他人...

- g-dog