3

我正在制作一个简单的移动网页，上面有一张带有图像地图的图像。我希望图像在用户触摸图像时改变，并在用户抬起手指时改变回来。图像被分成 3 个部分，它在触摸时切换到的图像会根据他们触摸的 3 个区域中的哪一个而有所不同。

我的问题是我无法在 IOS 或 Android 上为图像地图区域触发 touchstart 事件。如果我使用 onmousedown 它可以正常工作，但是 IOS 似乎不会触发此事件，直到用户已经抬起手指，这对我不起作用。如果我在 div 或图像上监听它，我可以让 ontouchstart 工作，所以我知道我的事件处理程序等是正确的。

有谁知道我怎样才能让我的图像映射正确地触发触摸事件，或者另一个可以完成同样事情的 html 元素？

<html>
<head><title>Touch Test</title></head>
<body>
<script type="text/javascript">

//the handler I want to fire
function onTouchStart(e){
    alert('touch me more');
}

</script>

<div style="height:250px">  
 <div id="log"></div>  
 <div id="logDetails"></div>  

<!--If I dont have the image map over the image, this ontouchstart fires properly--> 
<img src='img/nbsLogo.png' ontouchstart="onTouchStart(event)"  usemap='#imageMap'/>

<!--The touch event fires on this div properly as well-->
<!--<div id="box" style="height:225px;width:225px;background:red;position:absolute;" ontouchmove="touchMove(event)" ontouchstart="onTouchStart(event)"></div>  -->
</div>  

<map id='imageMap' name='imageMap'>

<!-- This touch event never fires.  If I make it onmousedown, it fires properly, but only after the user has lifted their finger-->
<area id='coldDark' title='coldDark' shape='rect' ontouchstart='onTouchStart(event)' coords='0,0,361,272'>
</map>

</body>
</html>

任何帮助是极大的赞赏

谢谢

4

2 回答 2

0

我做过类似的事情，并且使用 onmouseover 在 ios/android 和普通浏览器中效果很好。试试看。

于 2013-09-11T11:10:03.463 回答
0

我认为图像映射不支持触摸事件。我发布了一个类似的问题：

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

看看我做的测试，你会发现我得到了与你相似的结果——对鼠标事件的响应有点笨拙，但对触摸事件完全没有响应。

我最终将图像地图坐标与 div （确实接收触摸事件）和自定义 JavaScript 命中检测一起使用。

于 2013-09-17T19:42:05.447 回答