HTML图像地图区域触摸事件没有触发

我正在制作一个简单的移动网页，其中有一个图像和一个图像映射。我希望图像在用户触摸图像时改变，并在用户抬起手指时改回。图像被分成三部分，其切换为触摸的图像根据触摸的3个区域中的哪一个而不同。HTML图像地图区域触摸事件没有触发

我的问题是我无法得到touchstart事件来触发图像映射区域，在IOS或Android上。如果我使用onmousedown它可以正常工作，但IOS dosnt似乎会触发此事件，直到用户已经拿起他们的手指，哪个dosnt为我工作。如果我在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>

任何帮助是极大的赞赏

谢谢

来源

2013-08-16 jln646v

可能连接：http://stackoverflow.com/questions/2962279/ipad-safaris-mapping-of-mouse-events-to-touch-events-in-image-maps –

我已经做了类似的东西，并使用的onmouseover在IOS/Android和也在正常的浏览器的伟大工程。试一试。

来源

2013-09-11 11:10:03 read

我不认为图像地图支持触摸事件。我张贴了类似的问题：

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

看看我做的测试，你会看到，我得到了类似的结果，以你的 - 鼠标事件都在一定程度上笨重的答复，但没有任何反应触摸事件。

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

来源

2013-09-17 19:42:05

HTML图像地图区域触摸事件没有触发

回答

相关问题