HTML图像地图区域触摸事件未启动

HTML Image Map Area touch event not firing

本文关键字：事件 启动 触摸 区域 图像 地图 HTML      更新时间：2023-09-26

我正在制作一个简单的移动网页，上面有一张带有图像地图的图像。我希望当用户触摸图像时图像会发生变化，当用户抬起手指时图像会变回。图像分为三部分，触摸时切换到的图像会根据他们触摸的三个区域中的哪一个而变化。

我的问题是，在IOS或Android上，我无法为图像地图区域启动touchstart事件。如果我使用onmousedown，它可以正常工作，但IOS似乎不会触发这个事件，直到用户已经举起手指，这对我来说不起作用。如果我在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>

非常感谢任何帮助

感谢

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

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

iOS/Mobile Safari 支持HTML图像地图中的触摸事件吗

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

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

相关文章：