類似于Android的Touch事件，用戶一次滑動會出發一次Down，0次或者多次Move，一次Up。敲敲打打，第一次用Js實現，代碼如下

active.html

content="width=device-width,

initial-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

div {

background-color: #ccc;

height: 100%;

width: 100%;

position: absolute;

}

body {

margin: 0px;

padding: 0px;

overflow: hidden;

}

var desc = document.getElementById("desc");

var startHandler = function (e) {

var startX = e.touches[0].pageX;

var startY = e.touches[0].pageY;

desc.innerText = "start X: " + startX + " Y : " + startY;

desc.appendChild(document.createElement("br"));

}

var moveHandler = function (e) {

desc.innerText = desc.innerText+ " move X: " + e.touches[0].pageX + " Y : " + e.touches[0].pageY;

desc.appendChild(document.createElement("br"));

}

var endHandler = function (e) {

desc.innerText = desc.innerText+ " touchend ";

}

var content = document.getElementById("content");

content.addEventListener('touchstart', startHandler);

content.addEventListener('touchmove', moveHandler);

content.addEventListener('touchend', endHandler);

使用Chrome測試效果如圖：

模擬手指按下沒有滑動時：

模擬手指滑動時：

和預期一樣，輕松實現了時間的監聽，點支煙慶祝。

部署到真機

手指點擊效果：

沒問題，準備再點只煙慶祝。

手指滑動效果：

無論手指如何滑動，touchmove只會觸發一次，touchend完全失效，不會觸發，反復查看代碼，作為web新手小白，無解，無奈找度娘。幾番搜索之后，初入web門檻的我，遇到了所有web工程師了噩夢，瀏覽器兼容性問題！在Android4.x ，和部分瀏覽器touchmove只會觸發一次 或者不會觸發，touchend無法觸發。蛋疼！一個比較簡單粗暴的解決方案，在startTouch中加入如下代碼：

e.preventDefault();

方法說明：

該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作(如果存在這樣的動作)。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。(摘自w3cschool) 意思很簡單，設置了這個方法之后，相當于是取消了瀏覽器自身的一切默認事件操作。

加上之后在我自己的Android真機(小米Note OS MIUI 4.4.4)效果如下:

手指點擊：

手指滑動：

基本上解決了兼容性而出現move 和end 無法正常觸發的問題。

但并不完美！

第一：當點擊的時候，會之上觸發一次Move方法(這點還勉強可以接受)。

第二：設置了 e.preventDefault();方法之后，取消瀏覽器自身的默認操作，這就比較蛋疼了，當前web頁面不能滑動了！也就是意味著如果當前的web 頁面的內容如果超過了屏幕的高度，屏幕以外的內容就無法看到了，因為取消的設置了preventDefault，取消了瀏覽器本身的操作。

總結

以上是生活随笔為你收集整理的android转web,Android 转 web app 笔记一：Touch事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。