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. ...
随机推荐
- 2.使用JDK开发webService
使用jdk开发webService需要注意:jdk版本必须1.6以及1.6以上! 以下webService的组成部分: server端和client端,通过服务器端(server)webService ...
- iOS网络基础知识
iOS网络基础知识 1.一次HTTP请求的完整过程 (1)浏览器或应用发起Http请求,请求包含Http请求Http(请求),地址(url),协议(Http1.1)请求为头部 (2)web服务器接收到 ...
- Mac环境下svn的使用
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...
- 对InvokeAction简略分析了解验证失败为什么Action还会继续执行
一.前言 有些同学使用AuthorizationFilter来进行用户是否登录验证,如果未登录就跳到登录页. 很简单的一个场景,但是有些同学会发现虽然验证失败了,但是整个Action还会执行一遍. 于 ...
- 消息智能路由组件SmartRoute
消息传递在软件开发过程中是一件很常见的事情,而在不同的场景所使用消息传递方式也有所不同,在对象之间制定相关接口方法和对象结构,对于进程之间可能使用内存共享或一些通讯产品,在不同服务器之的消息通讯则使用 ...
- Redis 系列 (一) StackExchange.Redis的使用
一.DLL安装 用NuGet搜索StackExchange.Redis,然后下载就可以. ConnectionMultiplexer对象是StackExchange.Redis最中枢的对象.这个类的实 ...
- ZeroMQ研究与应用分析
1 ZeroMQ概述 ZeroMQ是一种基于消息队列的多线程网络库,其对套接字类型.连接处理.帧.甚至路由的底层细节进行抽象,提供跨越多种传输协议的套接字.ZeroMQ是网络通信中新的一层,介于应用 ...
- Nim教程【十】
openarray类型 注意:openarray类型只能用于参数 固定大小的数组虽然性能不错,但过于呆板,使用取来不是很方便 对于一个方法来说,传入参数如果是一个数组,最好是不要限制数组的长度 也就是 ...
- java输出任意两个日期之间有多少天
package JingDian; import java.text.ParseException; import java.text.SimpleDateFormat; import java.ut ...
- 【译】用Fragment解决屏幕旋转（状态发生变化）状态不能保持的问题
这篇文章解决了在StackOverflow上一个经常被提到的问题. 在配置发生变化(Configuration changs)时,什么是最好的保存活动对象方法,比如运行中的线程,Sockets,Asy ...