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圖像地圖區域觸摸事件沒有觸發

回答

相關問題