web中的触摸(touch)与手势(gesture)事件

时间:2022-09-01 10:51:48

一、触摸事件(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)事件的更多相关文章

  1. Android系统下用js自定义gesture事件(仿ios实现移动端事件一致)

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  2. 移动web中一些问题处理与事件说明

    1.1.1 所有盒子以边框开始计算 /*设置宽度以边框开始计算*/-webkit-box-sizing: border-box;box-sizing: border-box; 在移动端通常使用的是百分 ...

  3. IOS 手势-轻点、触摸、手势、事件

    1.概念 手势是从你用一个或多个手指接触屏幕时开始,直到手指离开屏幕为止所发生的所有事件.无论手势持续多长时间,只要一个或多个手指仍在屏幕上,这个手势就存在. 触摸是指把手指放到IOS设备的屏幕上,从 ...

  4. 手机触摸touch事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  5. android学习笔记52——手势Gesture,增加手势、识别手势

    手势Gesture,增加手势 android除了提供了手势检测之外,还允许应用程序把用户手势(多个持续的触摸事件在屏幕上形成特定的形状)添加到指定文件中,以备以后使用 如果程序需要,当用户下次再次画出 ...

  6. android学习笔记51——SQLite 手势Gesture

    手势Gesture 所谓手势,是指用户手指或触摸笔在触摸屏幕上的连续触碰行为. Androi对两种手势行为都提供了支持: 1.对于第一种手势而言,android提供了手势检测,并为手势检测提供了相应的 ...

  7. Android 中多点触摸协议

    http://blog.csdn.net/zuosifengli/article/details/7398661 Android 中多点触摸协议: 参考: http://www.kernel.org/ ...

  8. 关于js-binding中Layer触摸事件的优化

    关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

  9. React-native 中的触摸响应功能

    我们在做APP的时候,与桌面应用系统不同的是触摸响应. web页面对触摸响应的支持和原生的APP有着很大的差异. 基本用法 componentWillMount: function() { this. ...

随机推荐

  1. Android数据存储之Android 6&period;0运行时权限下文件存储的思考

    前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...

  2. js Function&lpar;&rpar;构造函数

    var scope="global";    function constructFunction(){        var scope="local";   ...

  3. Linux&sol;Unix双机建立信任教程

    Linux/Unix双机建立信任教程 一 需要建立信任关系的2台主机都执行生成密钥输入ssh-keygen -t rsa之后全部默认回车,这样就会在/root/.ssh下生成密钥文件 [root@pl ...

  4. std&colon;&colon;map的clear&lpar;&rpar;没有用&quest;

    昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...

  5. 我喜欢的乐队-Euphoria

    来自日本的后摇乐团,001年冬天由森川裕之.佐藤昭太.木下阳辅三人于东京组建,2003年签约日本独立厂牌123Record,并发行首张EP细碟<Floral Dew>.包括EP.Singl ...

  6. 第1章(三)安装VS2015和Xamarin For VS

    原文 第1章(三)安装VS2015和Xamarin For VS 操作系统:Win7  64位(sp1或更高版本) 1.安装VS2015 VS2015简体中文企业版:vs2015.ent_chs.is ...

  7. angularjs 1&period;3 综合学习 &lpar;one way bind &comma; ng-if &comma; ng-switch &comma; ng-messages&comma; ng-form &comma;ng-model &rpar;

    主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...

  8. TypeScript 基本语法

    TypeScript 基本语法   TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  9. 【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

    简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...

  10. Ajax之路

    第一部分: Ajax全称Asynchronous Javascript and XML,中文意思为"异步的Javascript 和XML".Ajax这组技术是web2.0的核心之一 ...