Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
iOS/Mobile Safari是否支持HTML图像地图中的触摸事件_Html_Ios_Mobile_Safari_Imagemap - Fatal编程技术网

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

iOS/Mobile Safari是否支持HTML图像地图中的触摸事件,html,ios,mobile,safari,imagemap,Html,Ios,Mobile,Safari,Imagemap,谁能确切地告诉我,html图像地图是否支持Mobile Safari中的触摸事件?我需要使用图像地图,因为我有不规则形状的可点击区域。我的测试表明鼠标事件是受支持的(但方式有限),触摸事件似乎根本不会触发 我做了一个最简单的测试: 蓝色多边形是为鼠标事件装配的。 红色多边形用于触摸事件 当我在常规Safari中查看此页面时,如我所料,单击或悬停在蓝色多边形上会触发事件。当然,红色多边形什么也不做(因为桌面上不支持触摸事件) 然而,当我在我的iPad上查看此页面时,蓝色多边形会触发一个鼠标移

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

我做了一个最简单的测试:


蓝色多边形是为鼠标事件装配的。 红色多边形用于触摸事件

当我在常规Safari中查看此页面时,如我所料,单击或悬停在蓝色多边形上会触发事件。当然,红色多边形什么也不做(因为桌面上不支持触摸事件)

然而,当我在我的iPad上查看此页面时,蓝色多边形会触发一个鼠标移动、鼠标向下、单次点击鼠标上的鼠标上下三个按钮,除此之外什么都没有。更糟糕的是,触摸红色多边形没有任何作用


我完全希望我错过了一些简单的东西,但如果没有,我真的很想知道到底发生了什么。

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

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

2) 即使支持鼠标事件,它们也不能提供足够的控制,只能执行单个选择(正如我上面提到的,同时启动mousemove、mousedown和mouseup)——即使如此,它的响应也不如我(或其他人)所希望的那样灵敏

解决方案:

最后,我把图像放在一个div标签中(它支持所有触摸事件),然后根据原始图像地图数据进行我自己的点击检测

虽然不是最理想的解决方案,但效果良好。希望这对其他人有帮助

<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>