3

イメージ マップを重ねたイメージがある単純なモバイル Web ページを作成しています。ユーザーが画像に触れると画像が変わり、ユーザーが指を離すと元に戻ります。画像は 3 つの部分に分割されており、タッチした 3 つの領域のどの部分に触れたかによって、切り替えられる画像が異なります。

私の問題は、IOS または Android でイメージ マップ エリアに対して touchstart イベントを発生させることができないことです。onmousedown を使用すると正しく動作しますが、IOS はユーザーが指を離すまでこのイベントを発生させないようです。これは私にとってはうまくいきません。divまたは画像でontouchstartをリッスンすると、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 に答える