浅谈javascript的Touch事件


Posted in Javascript onSeptember 27, 2015

js的touch事件,一般用于移动端的触屏滑动

$(function(){document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);}

touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。

以上事件的event对象上面都存在如下属性:

touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性:

clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

触摸事件

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:
     1. touchstart:手指放在一个DOM元素上。
     2. touchmove:手指拖曳一个DOM元素。
     3. touchend:手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表:
     1. touches:当前位于屏幕上的所有手指的一个列表。
     2. targetTouches:位于当前DOM元素上的手指的一个列表。
     3. changedTouches:涉及当前事件的手指的一个列表

    例如,在一个touchend事件中,这就会是移开的手指。

这些列表由包含了触摸信息的对象组成:
     1. identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。
     2. target:DOM元素,是动作所针对的目标。
     3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
     4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。

可触控应用  

     touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势,比如说捏缩放、旋转等待。    下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素:

var obj = document.getElementByIdx_x_x_x_x_x_x('id');
 obj.addEventListener('touchmove', function(event) 
 { // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) 
 {
  var touch = event.targetTouches[0];
   // 把元素放在手指所在的位置
   obj.style.left = touch.pageX + 'px';
     obj.style.top = touch.pageY + 'px';
  }
}, false);

      下面是一个示例,该例子显示了屏幕上当前所有的触点,它的作用就是用来感受一下设备的响应性。

// 设置画布并通过ctx变量来暴露上下文复制代码
 canvas.addEventListener('touchmove',   
 function(event) {
    for (var i = 0; i < event.touches.length; i++) {
 var touch = event.touches;
  ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
   }
  }, false);

演示

      到处都有着许多有意思的多点触摸演示,比如说这个由Paul Irish和其他人实现的基于画布的绘画演示。

      还有Browser Ninja,一个技术演示,是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。

最佳做法

阻止缩放

     缺省的多点触摸设置不是特别的好用,因为你的滑动和手势往往与浏览器的行为有关联,比如说滚动和缩放。

     要禁用缩放功能的话,使用下面的元标记设置你的视图区(viewport),这样其对于用户来说就是不可伸缩的了:
     content="width=device-width, initial-scale=1.0, user-scalable=no">
     看看这篇关于移动HTML 5的文章,了解更多关于视图区设置的信息。

阻止滚动

     一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
   }, false);

细心渲染

     如果你正在编写的多点触控应用涉及了复杂的多指手势的话,要小心地考虑如何响应触摸事件,因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子,你可以在有触摸输入的时候就立刻进行绘制:

canvas.addEventListener('touchmove', function(event) {
   renderTouches(event.touches);
  },

    不过这一技术并不是要随着屏幕上的手指个数的增多而扩充,替代做法是,可以跟踪所有的手指,然后在一个循环中做渲染,这样可获得更好的性能:

var touches = []
  canvas.addEventListener('touchmove', function(event) {
    touches = event.touches;
  }, false);
  // 设置一个每秒60帧的定时器
  timer = setInterval(function() {
   renderTouches(touches);
  }, 15);

     提示:setInterval不太适合于动画,因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数,基于性能和电池工作时间原因,这是一个更好的选择。一但浏览器提供了对该函数的支持,那将是首选的处理事情的方式。

使用targetTouches和changedTouches
    要记住的一点是,event.touches是与屏幕接触的所有手指的一个数组,而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

    最后一点,因为你是在为移动设备做开发,因此你应该要留心移动的最佳做法,这些在Eric Bidelman的文章中有论及,以及要了解这一W3C文档。

设备支持     

    遗憾的是,触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息,其中包括哪些事件是支持的,以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android2.3.3,在Xoom上测试了Android 3.0.1,以及在iPad和iPhone上测试了iOS 4.2。

    简而言之,所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

    规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:
      1. touchenter:移动的手指进入一个DOM元素。
      2. toucheleave:移动手指离开一个DOM元素。
      3. touchcancel:触摸被中断(实现规范)。

     被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过,被测试的浏览器没有支持radiusX、radiusY或是rotationAngle属性,这些属性指明触摸屏幕的手指的形状。在一次touchmove期间,事件大约一秒钟触发60次,所有的被测试设备都是这样。

Javascript 相关文章推荐
js 程序执行与顺序实现详解
May 13 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
vue自定义filters过滤器
Apr 26 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
深入分析jsonp协议原理
Sep 26 #Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 #Javascript
angularjs学习笔记之双向数据绑定
Sep 26 #Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
初步理解Python进程的信号通讯
2015/04/09 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python中import学习备忘笔记
2017/01/24 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
法学专业个人求职信
2013/09/26 职场文书
领导党性分析材料
2014/02/15 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
送给客户微信问候语!
2019/07/04 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Golang 切片(Slice)实现增删改查
2022/04/22 Golang