android转web,Android 转 web app 笔记一：Touch事件

类似于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，取消了浏览器本身的操作。