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. ...
随机推荐
- RHEL5.8配置开机自动挂载磁盘
Linux环境中可以通过fstab来设置自动挂载磁盘或者共享存储,操作如下: fstab配置文件路径:/etc/fstab 每行代表一个存储位置. [root@appsrv01 ~]# cat /et ...
- WPF快速入门系列(7)——深入解析WPF模板
一.引言 模板从字面意思理解是“具有一定规格的样板".在现实生活中,砖块都是方方正正的,那是因为制作砖块的模板是方方正正的,如果我们使模板为圆形的话,则制作出来的砖块就是圆形的,此时我们并不 ...
- SWT: 发起事件 post event
有很多学习SWT的同志遇到过一类需求,为某些控件添加了诸如MouseListener.KeyListener之类的监听,然后呢,希望使用代码模拟鼠标.键盘来执行点击.按键等操作. 首先说明一点,这是可 ...
- java笔试题（金山网络）
今天参加金山的校园招聘,java笔试,回来仔细研究实现一下: 题目1:工厂两条生产线,三个工人,生产线上可以最多存放m个产品,当生产线满时,机器停止生产,等产品线不满时才继续生产,每条产线上一次只能允 ...
- spring源码分析(一)IoC、DI
创建日期:2016.08.06 修改日期:2016.08.07 - 2016.08.12 交流QQ:992591601 参考书籍:<spring源码深度解析>.<spring技术内幕 ...
- 青蛙的约会 java版
参考http://blog.csdn.net/polossk/article/details/9799735 package acm; public class FrogDate { public s ...
- Properties
java.util 类 Properties 因为 Properties 继承于 Hashtable,所以可对 Properties 对象应用 put 和 putAll 方法.但强烈反对使用这两个方法 ...
- 大叔也说Xamarin~Android篇~ListView里的Click事件并获取本行的其它元素
回到目录 我原创,我贡献,我是仓储大叔 本篇大叔原创,本着对技术的热爱去研究它,把成果分享给国人!大叔始终相信一句话:你只有选择一个感兴趣的工作,你才能更好的发挥你的潜力,而这一切都建立在你不断研究, ...
- Piwik延迟加载脚本
piwik有时候会卡页面,为了不影响页面,可以将Piwik代码放到最后加载 <!-- Piwik --> <script type="text/javascript&quo ...
- salesforce 零基础学习（四十一）Group
salesforce中,有的时候我们需要将一组用户放进一个Group,用来实现以下主要功能: 1.通过sharing rule设置默认的共享访问; 2.将记录分享给其他用户; 3.指定同步的联系人,这 ...