浅谈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 相关文章推荐
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
vue渲染方式render和template的区别
Jun 05 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
source.php查看源文件
2006/12/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
php实现登录页面的简单实例
2019/09/29 PHP
javascript 写类方式之八
2009/07/05 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python中为什么要用self探讨
2015/04/14 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Django异步任务线程池实现原理
2019/12/17 Python
python之语音识别speech模块
2020/09/09 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
土建技术员岗位职责
2015/04/11 职场文书
倡议书范文大全
2015/04/28 职场文书
刑事撤诉申请书
2015/05/18 职场文书