HTML5   发布时间:2022-04-27  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了iOS / Mobile Safari支持HTML图像映射中的触摸事件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如果html图像地图@L_99_0@mobile 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,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,而不是其他任何内容.更糟糕的是,触摸红色多边形什么也没做!

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

解决方法

已经有几个月了,没有人提供更明确的答案,所以我认为最好回答我自己的发现:

1)触摸图像地图上的事件似乎根本不支持移动野生动物园.

2)即使支持鼠标事件,它们也无法提供足够的控制来执行任何操作而不是单个选择(正如我上面提到的,一次性触发鼠标移动,mousedown和mouseup) – 即使这样,它也不像我(或任何其他人)想要.

解:

我最终将图像放在div标签内(它支持所有触摸事件),然后根据原始图像映射数据进行自己的命中检测.

不是最理想的解决方案,但它运作良好并且表现良好.希望这有助于其他人……

大佬总结

以上是大佬教程为你收集整理的iOS / Mobile Safari支持HTML图像映射中的触摸事件全部内容,希望文章能够帮你解决iOS / Mobile Safari支持HTML图像映射中的触摸事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。