JS触摸事件、手势事件详解

触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现,用户使用最多的事件啦!
难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊。

针对鼠标事件,有哪些不适应?

dbclick

触屏设备不支持双击事件。双击浏览器窗口,会放大画面。

可以通过在head标签内加上这么一行:

代码如下:

<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

可以实现,我们编写的页面不会随着用的手势而放大缩小。

关于meta标签,我还没有研究过,罪过啊。

mouse

在触屏上,我们单击一个元素,会相应的触发:mousemove mousedown mouseup click,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。

同时也会触发mouseovermouseout,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。

随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。

触摸事件

该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。
1、touchstart

当手指放在屏幕上触发。

2、touchmove

当手指在屏幕上滑动时,连续地触发。

3、touchend

当手指从屏幕上离开时触发。

4、touchcancel

当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。

【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动。

除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
1、touches:表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时,event.touches.length=1,

当两个手指在触屏上时,event.touches.length=2,以此类推。
2、targetTouches:特定于事件目标的touch对象数组。

因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

3、changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性:
4、clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点目标。

【如何使用呢?】

  EventUtil.addHandler(div,"touchstart",function(event){
    div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
  });
  EventUtil.addHandler(div,"touchmove",function(event){
    event.preventDefault();
    div.innerHTML=event.touches[0].clientX;
  });
  EventUtil.addHandler(div,"touchend",function(event){
    div.innerHTML=event.changedTouches[0].clientY;
  });

使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。

event.touches[0]

touchend事件处理函数中,当该事件发生时,touches里面已经没有任何的touch对象了,此时,就要使用changeTouches集合。

手势事件

  1. gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
  2. gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  3. gestureend:当任何一个手指从屏幕上面移开时触发。

【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

触摸事件与手势事件之间的关系

1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。

2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。

手势的专有属性

  1. rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
  2. scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • touch.js 拖动、缩放、旋转 (鼠标手势)功能代码

    可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback) { touch.on($targetObj, 'touchsta

  • 基于Angular.js实现的触摸滑动动画实例代码

    先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="

  • javascript移动开发中touch触摸事件详解

    事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现

  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?

  • javascript单页面手势滑屏切换原理详解

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v

  • 浅谈移动端之js touch事件 手势滑动事件

    现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

  • 基于JS实现Android,iOS一个手势动画效果

    废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:

  • JS触摸与手势事件详解

    本文为大家分享了JS触摸与手势事件,供大家参考,具体内容如下 1.触摸事件 包含 iOS 2.0 软件的 iPhone 3G 发布时,也包含了一个新版本的 Safari 浏览器.这款新的移动 Safari提供了一些与触摸(touch)操作相关的新事件.后来,Android 上的浏览器也实现了相同的事件.触摸事件会在用户手指放在屏幕上面时.在屏幕上滑动时或从屏幕上移开时触发.具体来说,有以下几个触摸事件. touchstart :当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. to

  • 移动端js触摸事件详解

    在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. 不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上.然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具. 这个问题的一个解决方案是在开发机器上模拟触发事件.对于单点触摸,触摸事件可以基于鼠标事件来

  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

随机推荐