首页手记 Android 转 web app 笔记一：Touch事件

Android 转 web app 笔记一：Touch事件

标签：

Android WebApp

类似于Android的Touch事件，用户一次滑动会出发一次Down，0次或者多次Move，一次Up。敲敲打打，第一次用Js实现，代码如下

<html>
<head>
    <title>active.html</title>

    <meta charset=UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="viewport"
          content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">

    <style type="text/css">

        div {
            background-color: #ccc;
            height: 100%;
            width: 100%;
            position: absolute;
        }

        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }

    </style>

</head>

<body>
<div id="content">
    <p id="desc"></p>
</div>
</body>
<script type="text/javascript">
    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);

</script>

</html>

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