Mobile Safari で HTML イメージ マップがタッチ イベントをサポートしているかどうか、誰でもはっきりと教えてもらえますか? 不規則な形状のクリック可能な領域があるため、イメージ マップを使用する必要があります。私のテストでは、マウス イベントがサポートされており (ただし、制限された方法で)、タッチ イベントがまったく発生していないようです。
私はこの最も簡単なテストを行いました:
<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 でこのページを表示すると、青いポリゴンは、1 回のタップで mousemove、mousedown、mouseup のトリプレットを起動し、他には何も起動しません。さらに悪いことに、赤いポリゴンに触れても何も起こりません!
簡単なことを見落としていることを心から願っていますが、そうでない場合は、何が起こっているのかを知りたいです。