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. ...
随机推荐
- springmvc和struts2的差别
springmvc和struts2的区别相关内容 1.spring mvc的入口是servlet,而struts2是filter filter功能:用户可以改变一个request和修改一个resp ...
- mysql 按时间段统计（年，季度，月，天，时）
按年汇总,统计: select sum(mymoney) as totalmoney, count(*) as sheets from mytable group by date_format(col ...
- halcon读取一张照片，并转化为灰度图像
dev_close_window () read_image (Image, 'E:/图片/123.jpg') get_image_size (Image, Width, Height) dev_op ...
- libmegjb.so加载问题调试和分析
欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=70 01-01 00:09:21.084: D/dalvikvm(10394): Try ...
- NetMq学习--发布订阅（一）
基于NeqMq 4.0.0-rc5版本发布端: using (var publisher = new PublisherSocket()) { publisher.Bind("tcp://* ...
- centos 搭建ftp服务器
1.安装vsftpd sudo yum install vsftpd 2.配置vsftpd.conf # Allow anonymous FTP? (Beware - allowed by defau ...
- 【腾讯Bugly干货分享】深度学习在OCR中的应用
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5809bb47cc5e52161640c5c8 Dev Club 是一个交流移动 ...
- Java IO8：IO简单总结
字节流.字符流继承关系 前几篇文章讲解了字节流.字符流的使用,不过Java提供给用户的流类远不止此,限于篇幅原因,没办法一一讲解,而且也没有必要一一讲解,就像我在写博客的时候多次提到的,有问题的时候学 ...
- Android SDK content Loader has encountered a problem.parseSdkContent failed
打开Eclipse,弹出Android SDK content Loader has encountered a problem.parseSdkContent failed,当点击detail按钮, ...
- 翻译-使用Spring WebService生成SOAP Web Service
原文链接:http://spring.io/guides/gs/producing-web-service/ 生成SOAP web service 该指南将带领你使用Spring创建一个基于SOAP的 ...