浅谈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文件包含的几种方式介绍
Sep 28 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
纯javascript版日历控件
Nov 24 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
React如何避免重渲染
Apr 10 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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中的正则表达式函数介绍
2012/02/27 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python自动发邮件脚本
2017/03/31 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
函授药学自我鉴定
2014/02/07 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
打架检讨书范文
2015/01/27 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python