Question

我正在创建一个简单的移动网页，其中我有一个图像，上面有图像映射。我想在用户触摸图像时更改图像，并在用户抬起手指时更改图像。图像分为3个部分，触摸时切换的图像根据触摸的3个区域中的哪个区域而变化。

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

有谁知道如何让我的图像映射正确地触发触摸事件，或者另一个可以完成同样事情的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>

非常感谢任何帮助

谢谢

Answer 1

我已经做过类似的事情并且使用onmouseover在ios / android和普通浏览器中都很棒。试一试。

Answer 2

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

Are Touch Events in HTML Image Maps Supported in iOS/Mobile Safari

看看我做过的测试，你会发现我得到的结果与你的相似 - 对鼠标事件的反应有些笨拙但对触摸事件没有任何反应。

我最终使用带有div（确实接收触摸事件）和自定义JavaScript命中检测的图像映射坐标。

HTML图像映射区域触摸事件未触发

2 个答案: