jquery如何獲取手機網頁觸屏坐標:ontouchstart 、ontouchend、ontouchmove


function handleTouchEvent(event) {
    //只跟蹤一次觸摸
    if (event.touches.length == 1) {
        var output = document.getElementById("output");
        switch (event.type) {
            case "touchstart":
                output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML += "Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滾動
                output.innerHTML += "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);

1. touchstart :手指放在一個DOM元素上。
2. touchmove :手指拖曳一個DOM元素。
3. touchend :手指從一個DOM元素上移開

 

這是監聽整個頁面的觸摸事件。加上這個代碼后,忘記了有個變量定義了 就是 output這個。

你在頁面建立一個id 放上代碼 就可以看到測試結果了。

1 <p id="output">這里顯示坐標</p>
2 <script>
3 ...上面的js代碼復制到這,就可以了
4 </script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM