web中的触摸（touch）与手势（gesture）事件


一、触摸事件（TouchEvent）：

　　事件：

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
touchmove:当手指在屏幕上滑动时连续的触发。调用preventDefault()可阻止滚动
touchend:当手指从屏幕上移开时触发
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明

　　事件属性：

e.touches:当前屏幕上所有触摸点的集合列表
e.targetTouches: 绑定事件的那个结点上的触摸点的集合列表
e.changedTouches: 触发事件时改变的触摸点的集合

　　事件属性返回数组的每个Touch对象包含下列属性：

clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。


例1、单个手指touch

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">

    <title>single figure touch test</title>

    <style type="text/css">

        html, body {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0

        }

        #canvas {

            position: relative;

            width: 100%;

            height: 100%;

        }

        .spirit { /* 方块的class名称*/

            position: absolute;

            width: 50px;

            height: 50px;

            background-color: red;

        }

    </style>

</head>

<body>

<div id="canvas"></div>

<script>

    // define global variable

    var canvas = document.getElementById("canvas"),

            spirit, startX, startY;

    // touch start listener

    function touchStart(event) {

        //防止手指的操作引起页面滑动

        event.preventDefault();

        if (spirit || !event.touches.length) return;

        var touch = event.touches[0];

        startX = touch.pageX;

        startY = touch.pageY;

        spirit = document.createElement("div");

        spirit.className = "spirit";

        //注意：一定要加‘px’单位

        spirit.style.left = startX + 'px';

        spirit.style.top = startY + 'px';

        canvas.appendChild(spirit);

    }

    // add touch start listener

    canvas.addEventListener("touchstart", touchStart, false);

    // touch move listener

    function touchMove(event) {

        //防止手指的操作引起页面滑动

        event.preventDefault();

        if (!spirit || !event.touches.length) return;

        var touch = event.touches[0],

                x = touch.pageX - startX,

                y = touch.pageY - startY;

        spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';

    }

    // touch move listener

    canvas.addEventListener("touchmove", touchMove, false);

    // touch end listener

    function touchEnd(event) {

        if (!spirit) return;

        canvas.removeChild(spirit);

        spirit = null;

    }

    // touch end listener

    canvas.addEventListener("touchend", touchEnd, false);

</script>

</body>

</html>

例2、多个手指touch

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">

    <title>multi figure touch test</title>

    <style type="text/css">

        html, body {

            margin: 0;

            padding: 0;

            height: 100%;

            width: 100%;

        }

        #canvas {

            width: 100%;

            height: 100%;

            position: relative;

        }

        .spirit {

            position: absolute;

            width: 70px;

            height: 70px;

        }

    </style>

</head>

<body>

<div id="canvas"></div>

</body>

<script type="text/javascript">

    var canvas = document.getElementById("canvas"),

            stacks = [{

                color: "red"

            }, {

                color: "blue"

            }, {

                color: "green"

            }, {

                color: "black"

            }, {

                color: "yellow"

            }, {

                color: "orange"

            }];

    function getEmptyStack() {

        var i = 0, s, l = stacks.length;

        for (; i < l; i++) {

            s = stacks[i];

            if (!s.touchId)

                return s;

        }

        return null;

    }

    function getStackByTouchId(touchId) {

        var i = 0, s, l = stacks.length;

        for (; i < l; i++) {

            s = stacks[i];

            if (s.touchId == touchId)

                return s;

        }

        return null;

    }

    function touchStart(e) {

        e.preventDefault();

        var touches = e.changedTouches,

                i = 0, l = touches.length, touch, stack;

        for (; i < l; i++) {

            touch = touches[i];

            stack = getStackByTouchId(touch.identifier);

            if (stack) return;

            stack = getEmptyStack();

            if (stack) {

                stack.touchId = touch.identifier;

                stack.spirit = document.createElement("div");

                stack.spirit.className = "spirit";

                stack.startX = touch.pageX;

                stack.startY = touch.pageY;

                stack.spirit.style.left = touch.pageX + "px";

                stack.spirit.style.top = touch.pageY + "px";

                stack.spirit.style.backgroundColor = stack.color;

                canvas.appendChild(stack.spirit);

            } else { // stack list is full

                return;

            }

        }

    }

    function touchMove(e) {

        e.preventDefault();

        var touches = e.targetTouches,

                i = 0, l = touches.length, touch, stack;

        for (; i < l; i++) {

            touch = touches[i];

            stack = getStackByTouchId(touch.identifier);

            if (stack) {

                var x = touch.pageX - stack.startX,

                        y = touch.pageY - stack.startY,

                        spirit = stack.spirit;

                spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';

            }

        }

    }

    function touchEnd(e) {

        var touches = e.changedTouches,

                i = 0, l = touches.length, touch, stack;

        for (; i < l; i++) {

            touch = touches[i];

            stack = getStackByTouchId(touch.identifier);

            if (stack) {

                stack.touchId = null;

                canvas.removeChild(stack.spirit);

                stack.spirit = null;

            }

        }

    }

    //当触控被中断

    function touchCancel(e) {

        var touches = e.changedTouches,

                i = 0, l = touches.length, touch, stack;

        for (; i < l; i++) {

            touch = touches[i];

            stack = getStackByTouchId(touch.identifier);

            if (stack) {

                stack.touchId = null;

                canvas.removeChild(stack.spirit);

                stack.spirit = null;

            }

        }

    }

    canvas.addEventListener("touchstart", touchStart, false);

    canvas.addEventListener("touchmove", touchMove, false);

    canvas.addEventListener("touchend", touchEnd, false);

    canvas.addEventListener("touchCancel", touchCancel, false);

</script>

</html>

例3、单个手指放下并滑动

　　1、当手指滑动时，整个page会跟着移动，除非preventDefault了body的touchmove。

　　2、当手指停下来后， body的onscroll将会触发。

------------------------------------------------------------------------------------------------------

二、手势事件（GestureEvent）：

　　GestureEvent包含手指点击（click），轻拂（flick），双击（double-click），两只手指的分开/闭合（scale）、转动（rotate），手指分开比例（scale）和手指转动角度（rotation）信息。

　　事件：

gesturestart:当有两根或多根手指放到屏幕上的时候触发
gesturechange:当有两根或多根手指在屏幕上，并且有手指移动的时候触发

gestureend:当倒数第二根手指提起的时候触发，结束gesture

　　事件属性：

e.rotation:两只手指的转动
e.scale: 两只手指的分开/闭合

例1、依次放下两根手指

　　1、第一根手指放下，触发touchstart

　　2、第二根手指放下，触发gesturestart

　　3、触发第二根手指的touchstart

　　4、立即触发gesturechange

　　5、手指移动，持续触发gesturechange

　　6、第二根手指提起，触发gestureend

　　7、触发第二根手指的touchend

　　、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart。

　　9、提起第一根手指，触发touchend

例2、让element随着你的两根手指运动而转动

e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)';

------------------------------------------------------------------------------------------------------

参考资料：

【1】指尖下的js ——多触式web前端开发之一：对于Touch的处理

【2】触摸与手势事件

web中的触摸（touch）与手势（gesture）事件的更多相关文章

Android系统下用js自定义gesture事件（仿ios实现移动端事件一致）
.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...
移动web中一些问题处理与事件说明
1.1.1 所有盒子以边框开始计算 /*设置宽度以边框开始计算*/-webkit-box-sizing: border-box;box-sizing: border-box; 在移动端通常使用的是百分 ...
IOS 手势-轻点、触摸、手势、事件
1.概念手势是从你用一个或多个手指接触屏幕时开始,直到手指离开屏幕为止所发生的所有事件.无论手势持续多长时间,只要一个或多个手指仍在屏幕上,这个手势就存在. 触摸是指把手指放到IOS设备的屏幕上,从 ...
手机触摸touch事件
1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
android学习笔记52——手势Gesture，增加手势、识别手势
手势Gesture,增加手势 android除了提供了手势检测之外,还允许应用程序把用户手势(多个持续的触摸事件在屏幕上形成特定的形状)添加到指定文件中,以备以后使用如果程序需要,当用户下次再次画出 ...
android学习笔记51——SQLite 手势Gesture
手势Gesture 所谓手势,是指用户手指或触摸笔在触摸屏幕上的连续触碰行为. Androi对两种手势行为都提供了支持: 1.对于第一种手势而言,android提供了手势检测,并为手势检测提供了相应的 ...
Android 中多点触摸协议
http://blog.csdn.net/zuosifengli/article/details/7398661 Android 中多点触摸协议: 参考: http://www.kernel.org/ ...
关于js-binding中Layer触摸事件的优化
关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...
React-native 中的触摸响应功能
我们在做APP的时候,与桌面应用系统不同的是触摸响应. web页面对触摸响应的支持和原生的APP有着很大的差异. 基本用法 componentWillMount: function() { this. ...

随机推荐

Android数据存储之Android 6&period;0运行时权限下文件存储的思考
前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...
js Function()构造函数
var scope="global"; function constructFunction(){ var scope="local"; ...
Linux/Unix双机建立信任教程
Linux/Unix双机建立信任教程一需要建立信任关系的2台主机都执行生成密钥输入ssh-keygen -t rsa之后全部默认回车,这样就会在/root/.ssh下生成密钥文件 [root@pl ...
std&colon;&colon;map的clear()没有用&quest;
昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...
我喜欢的乐队-Euphoria
来自日本的后摇乐团,001年冬天由森川裕之.佐藤昭太.木下阳辅三人于东京组建,2003年签约日本独立厂牌123Record,并发行首张EP细碟<Floral Dew>.包括EP.Singl ...
第1章（三）安装VS2015和Xamarin For VS
原文第1章(三)安装VS2015和Xamarin For VS 操作系统:Win7 64位(sp1或更高版本) 1.安装VS2015 VS2015简体中文企业版:vs2015.ent_chs.is ...
angularjs 1&period;3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
TypeScript 基本语法
TypeScript 基本语法 TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...
【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件
简介马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...
Ajax之路
第一部分: Ajax全称Asynchronous Javascript and XML,中文意思为"异步的Javascript 和XML".Ajax这组技术是web2.0的核心之一 ...