如果html图像地图支持Mobile Safari中的触摸事件,那么有人能告诉我吗?我需要使用图像映射,因为我有不规则形状的可点击区域.我的测试显示支持鼠标事件(但是以有限的方式)并且触摸事件似乎根本不会发生.
我做了这个最简单的测试:
<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,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上查看此页面时,蓝色多边形会在单击时触发三个鼠标移动,mousedown,mouseup,而不是其他任何内容.更糟糕的是,触摸红色多边形什么也没做!
我完全希望我错过了一些简单的东西,但如果没有,我真的很想知道发生了什么.