HTML5触摸事件演化tap事件介绍


Posted in HTML / CSS onMarch 25, 2016

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。

HTML5触摸事件演化tap事件介绍

触摸事件的类型:

为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。

注意: 在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作)。如果你使用了触摸事件,可以调用 event.preventDefault() 来阻止鼠标事件被触发。

标准的触摸事件

事件名称 描述 包含touches数组
touchstart 当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element
touchmove 当用户在触摸平面上移动触点时触发。 事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同, 哪怕当 touchmove 事件触发时,触点已经移出了该 element 。
touchend 当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。 当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。 已经被从触摸平面上移除的触点,可以在 changedTouches 属性定义的 TouchList 中找到。
touchenter 当触点进入某个 element 时触发。此事件没有冒泡过程。
touchleave 当触点离开某个 element 时触发。此事件没有冒泡过程。
touchcancel 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): 由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。 触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。 当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。

触摸对象属性

Touch.identifier 返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指(或触摸笔等)所引发的所有事件中保持一致, 直到它离开触摸平面.
Touch.screenX 触点相对于屏幕左边沿的的X坐标. 只读属性.
Touch.screenY 触点相对于屏幕上边沿的的Y坐标. 只读属性.
Touch.clientX 触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
Touch.clientY 触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
Touch.pageX 触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
Touch.pageY 触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移. 只读属性.
Touch.radiusX 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
Touch.force 手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
Touch.radiusY 能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
Touch.target 当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

 

IE10+的触摸事件

IE指针事件
事件名称 描述(在触摸设备上)
MSPointerDown 触摸开始
MSPointerMove 接触点移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到元素内,相当于mouseover
MSPointerOut 触摸点离开元素,相当于mouseout

 

MSPointerEvent属性

属性 描述
hwTimestamp 创建事件的时间(ms)
isPrimary 标识该指针是不是主指针
pointerId 指针的唯一ID(类似于触摸事件的标识符)
pointerType 一个整数,标识了该事件来自鼠标、手写笔还是手指
pressure 笔的压力,0-255,只有手写笔输入时才可用
rotation 0-359的整数,光标的旋转度(如果支持的话)
tiltX/tiltY 手写笔的倾斜度,只有用手写笔输入时才支持

 

等价事件

鼠标 触摸 键盘
mousedown touchstart keydown
mousemove touchmove keydown
mouseup touchend keyup
mouseover   focus

 

很显然,触摸动作序列:touchstart-touchmove-touchend和鼠标序 列:mousedown-mousemove-mouseup以及键盘序列:keydown-keypress-keyup很相似,这并不是巧合,因为这 三种交互模式都可以描述为start-move-stop。

话说回来,click要经过touchstart-touchmove-touchend流程,300ms延迟,所以需要tap事件,tap就是在同一个点轻触时间很短。

封装好的tap和longtap事件

XML/HTML Code复制内容到剪贴板
  1. (function() {    
  2.     var TOUCHSTART, TOUCHEND;    
  3.     if (typeof(window.ontouchstart) != 'undefined') {    
  4.         TOUCHSTART = 'touchstart';    
  5.         TOUCHEND = 'touchend';    
  6.         TOUCHMOVE='touchmove';    
  7.      
  8.     } else if (typeof(window.onmspointerdown) != 'undefined') {    
  9.         TOUCHSTART = 'MSPointerDown';    
  10.         TOUCHEND = 'MSPointerUp';    
  11.         TOUCHMOVE='MSPointerMove';    
  12.     } else {    
  13.         TOUCHSTART = 'mousedown';    
  14.         TOUCHEND = 'mouseup';    
  15.         TOUCHMOVE = 'mousemove';    
  16.     }    
  17.     function NodeTouch(node) {    
  18.         this._node = node;    
  19.     }    
  20.     function tap(node,callback,scope) {    
  21.         node.addEventListener(TOUCHSTART, function(e) {    
  22.             x = e.touches[0].pageX;    
  23.             y = e.touches[0].pageY;    
  24.         });    
  25.         node.addEventListener(TOUCHEND, function(e) {    
  26.             e.stopPropagation();    
  27.             e.preventDefault();    
  28.             var curx = e.changedTouches[0].pageX;    
  29.             var cury = e.changedTouches[0].pageY;    
  30.             if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
  31.                 callback.apply(scope, arguments);    
  32.             }    
  33.         });    
  34.     }    
  35.     function longTap(node,callback,scope) {    
  36.         var x,y,startTime=0,endTime=0,in_dis=false;    
  37.         node.addEventListener(TOUCHSTART, function(e) {    
  38.             x = e.touches[0].pageX;    
  39.             y = e.touches[0].pageY;    
  40.             startTime=(new Date()).getTime();    
  41.         });    
  42.         node.addEventListener(TOUCHEND, function(e) {    
  43.             e.stopPropagation();    
  44.             e.preventDefault();    
  45.             var curx = e.changedTouches[0].pageX;    
  46.             var cury = e.changedTouches[0].pageY;    
  47.             if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
  48.                 in_dis=true;    
  49.             }else{    
  50.                 in_dis=false;    
  51.             }    
  52.             endTime=(new Date()).getTime();    
  53.             if (endTime - startTime > 300 && in_dis) {    
  54.                 callback.apply(scope, arguments);    
  55.             }    
  56.         });    
  57.     }    
  58.     NodeTouch.prototype.on = function(evt, callback, scope) {    
  59.         var scopeObj;    
  60.         var x,y;    
  61.         if (!scope) {    
  62.             scopeObj = this._node;    
  63.         } else {    
  64.             scopescopeObj = scope;    
  65.         }    
  66.         if (evt === 'tap') {    
  67.             tap(this._node,callback,scope);    
  68.         } else if(evt === 'longtap'){    
  69.             longTap(this._node,callback,scope);    
  70.         } else {    
  71.             this._node.addEventListener(evt, function() {    
  72.                 callback.apply(scope, arguments);    
  73.             });    
  74.         }    
  75.         return this;    
  76.     }    
  77.     window.$ = function(selector) {    
  78.         var node = document.querySelector(selector);    
  79.         if (node) {    
  80.             return new NodeTouch(node);    
  81.         } else {    
  82.             return null;    
  83.         }    
  84.     }    
  85. })();    
  86. var box=$("#box");    
  87. box.on("longtap",function(){    
  88.     console.log("你已经长按了");    
  89. },box)  

以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 #HTML / CSS
用html5绘制折线图的实例代码
Mar 25 #HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 #HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 #HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 #HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 #HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
You might like
session 的生命周期是多长
2006/10/09 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python实现计算倒数的方法
2015/07/11 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python字符串Intern机制详解
2019/07/01 Python
python实现各种插值法(数值分析)
2019/07/30 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
更夫岗位责任制
2014/02/11 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA