將觸摸事件添加到html img控件

我想在我的html5頁面上添加一個觸摸事件到img控件。將觸摸事件添加到html img控件

這是我到目前爲止有：

<img 
    src="Images/Home-icon.png" 
    onclick="Menu_Click('Home');" 
    ontouchend="Menu_Click('Home');" 
    draggable="false" 
    cssclass="iconImageStyle" 
    style="cursor: pointer;" 
    alternatetext="Home" 
    tooltip="Home" 
    height="32" 
    width="32" />

從一個正常的Web瀏覽器中單擊事件工作正常。但是，當我嘗試從我的ipad訪問它時，它沒有反應。

幫助將非常受歡迎。

編輯1

不過至今沒有運氣。我試圖用div來包圍img，並將touchend事件添加到div，但它沒有響應它。

編輯2

我也跟着上我的iPad作品的教程。基本上，本教程是一個畫布，顯示畫布內觸摸事件的座標。我只是將畫布和javascript添加到我的頁面，並讓它重疊我的一些img按鈕。我的頁面對觸摸事件作出反應，畫布正確顯示座標。現在，這是它越來越奇怪。畫布內出現的按鈕現在對觸摸結束事件作出反應，但實際上會觸發onclick事件！不在畫布裏面沒有任何東西反應同樣的按鈕...

這是教程代碼我在頁

<script type="text/javascript"> 
    var can, ctx, canX, canY, mouseIsDown = 0; 
    function init() { 
     can = document.getElementById("can"); 
     ctx = can.getContext("2d"); 
     document.body.addEventListener("mouseup", mouseUp, false); 
     document.body.addEventListener("touchcancel", touchUp, false); 
    } 
    function mouseUp() { 
     mouseIsDown = 0; 
     mouseXY(); 
    } 

    function touchUp() { 
     mouseIsDown = 0; 
     // no touch to track, so just show state 
     showPos(); 
     } 

    function mouseDown() { 
     mouseIsDown = 1; 
     mouseXY(); 
     } 

    function touchDown() { 
     mouseIsDown = 1; 
     touchXY(); 
     } 

    function mouseXY(e) { 
     if (!e) 
     var e = event; 
     canX = e.pageX - can.offsetLeft; 
     canY = e.pageY - can.offsetTop; 
     showPos(); 
     } 

    function touchXY(e) { 
     if (!e) 
     var e = event; 
     e.preventDefault(); 
     canX = e.targetTouches[0].pageX - can.offsetLeft; 
     canY = e.targetTouches[0].pageY - can.offsetTop; 
     showPos(); 
     } 

    function showPos() { 
     // large, centered, bright green text 
     ctx.font = "24pt Helvetica"; 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "middle"; 
     ctx.fillStyle = "rgb(64,255,64)"; 
     var str = canX + ", " + canY; 
     if (mouseIsDown) 
     str += " down"; 
     if (!mouseIsDown) 
     str += " up"; 
     ctx.clearRect(0, 0, can.width, can.height); 
     // draw text at center, max length to fit on canvas 
     ctx.fillText(str, can.width/2, can.height/2, can.width - 10); 
     // plot cursor 
     ctx.fillStyle = "white"; 
     ctx.fillRect(canX - 5, canY - 5, 10, 10); 
     } 

</script> 
<canvas id="can" height="200" width="300" style="background-color: black"> 
</canvas>

我將繼續調查粘貼。但從看起來像我將不得不把我的按鈕後面的畫布... 我寧願避免，如果可能的話，但到目前爲止我沒有看到任何其他解決方案。如果有效，我會將其作爲解決方案發布，除非有人比我更聰明可以提出更好的建議。

編輯3

本人確認的JavaScript是沒有用的。只需在img後面放置畫布，就可以響應點擊事件。我不知道爲什麼會發生這種情況，但我會一直這樣做，直到找到更好的解決方案。如果有人作爲解釋或更好的解決方案，歡迎您發佈它。

來源

2014-12-08 Pic Mickael

好的，終於搞清楚了。如果您對元素使用絕對位置，看起來像Touch Events無法正常工作。我使用CSS修改了我的div表格佈局，現在一切正常。

來源

2015-01-04 02:45:05

將觸摸事件添加到html img控件

回答

相關問題