触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。
触摸事件的类型:
为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 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+的触摸事件
MSPointerEvent属性
等价事件
鼠标 触摸 键盘 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复制内容到剪贴板- (function() {
- var TOUCHSTART, TOUCHEND;
- if (typeof(window.ontouchstart) != 'undefined') {
- TOUCHSTART = 'touchstart';
- TOUCHEND = 'touchend';
- TOUCHMOVE='touchmove';
- } else if (typeof(window.onmspointerdown) != 'undefined') {
- TOUCHSTART = 'MSPointerDown';
- TOUCHEND = 'MSPointerUp';
- TOUCHMOVE='MSPointerMove';
- } else {
- TOUCHSTART = 'mousedown';
- TOUCHEND = 'mouseup';
- TOUCHMOVE = 'mousemove';
- }
- function NodeTouch(node) {
- this._node = node;
- }
- function tap(node,callback,scope) {
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- callback.apply(scope, arguments);
- }
- });
- }
- function longTap(node,callback,scope) {
- var x,y,startTime=0,endTime=0,in_dis=false;
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- startTime=(new Date()).getTime();
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- in_dis=true;
- }else{
- in_dis=false;
- }
- endTime=(new Date()).getTime();
- if (endTime - startTime > 300 && in_dis) {
- callback.apply(scope, arguments);
- }
- });
- }
- NodeTouch.prototype.on = function(evt, callback, scope) {
- var scopeObj;
- var x,y;
- if (!scope) {
- scopeObj = this._node;
- } else {
- scopescopeObj = scope;
- }
- if (evt === 'tap') {
- tap(this._node,callback,scope);
- } else if(evt === 'longtap'){
- longTap(this._node,callback,scope);
- } else {
- this._node.addEventListener(evt, function() {
- callback.apply(scope, arguments);
- });
- }
- return this;
- }
- window.$ = function(selector) {
- var node = document.querySelector(selector);
- if (node) {
- return new NodeTouch(node);
- } else {
- return null;
- }
- }
- })();
- var box=$("#box");
- box.on("longtap",function(){
- console.log("你已经长按了");
- },box)
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
HTML5,触摸事件,tap
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。