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

Posted 2023-05-08

【中文标题】iOS/Mobile Safari 是不是支持 HTML 图像映射中的触摸事件

【英文标题】：Are Touch Events in HTML Image Maps Supported in iOS/Mobile SafariiOS/Mobile Safari 是否支持 HTML 图像映射中的触摸事件

【发布时间】：2013-09-16 06:17:10

【问题描述】：

谁能明确地告诉我，html 图像地图是否支持 Mobile Safari 中的触摸事件？我需要使用图像地图，因为我有不规则形状的可点击区域。我的测试表明支持鼠标事件（但方式有限）并且触摸事件似乎根本不触发。

我做了这个最简单的测试：

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

<img id="polygon_images" src="http://s18.postimg.org/7xvo1f9tl/polygons.png"  border="0" usemap="#my_polygons" />

<map id="my_polygons" name="my_polygons">
<area shape="poly"  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"  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，仅此而已。更糟糕的是，触摸红色多边形没有任何作用！

我完全希望我只是错过了一些简单的事情，但如果没有，我真的很想知道发生了什么。

【参考方案1】：

几个月过去了，没有其他人提供更明确的答案，所以我认为最好用我自己的发现来回应：

1) 移动 Safari 似乎根本不支持图像地图上的触摸事件。

2) 尽管 鼠标事件受支持，但它们并不能提供足够的控制来执行单次选择以外的任何操作（正如我上面提到的，同时触发 mousemove、mousedown 和 mouseup） --即使那样，它也没有我（或其他任何人;）想要的那样响应。

解决方案：

我最终将图像放在一个 div 标签内（它支持所有的触摸事件），然后根据原始图像映射数据进行我自己的命中检测。

不是最理想的解决方案，但效果很好。希望这对其他人有帮助...