浅谈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下组织javascript代码(js函数化)
Aug 25 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
ajax与302响应代码测试
Oct 23 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
js获取url传值的方法
2015/12/18 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python内置模块collections知识点总结
2019/12/19 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
委托公证书范本
2014/04/03 职场文书
2014年文秘工作总结
2014/11/25 职场文书
现场施工员岗位职责
2015/04/11 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技