touch.js——常见应用操作

基本事件：

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

touchcancel  //触摸过程被系统取消时触发（少用）

一、事件绑定（常用，重要）

touch.on( element, types, callback );

功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。

参数描述：

参数 类型 描述
element element或string 元素对象、选择器
types string 事件的类型（多为手势事件），可接受多个事件以空格分开；支持原生事件的透传
callback function 事件处理函数, 移除函数与绑定函数必须为同一引用;

部分手势事件

分类 参数 描述
缩放 pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 收缩
pinchout 放大
旋转 rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转
滑动 swipestart 滑动手势起点
swiping 滑动中
swipeend 滑动手势终点
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
swipe 滑动
拖动开始 dragstart 拖动屏幕
拖动 drag 拖动手势
拖动结束 dragend 拖动屏幕
拖动 drag 拖动手势
长按 hold 长按屏幕
敲击 tap 单击屏幕
doubletap 双击屏幕


部分事件处理函数

属性 描述
originEvent 触发某事件的原生对象
type 事件的名称
rotation 旋转角度
scale 缩放比例
direction 操作的方向属性
fingersCount 操作的手势数量
position 相关位置信息, 不同的操作产生不同的位置信息
distance swipe类两点之间的位移
distanceX, x 手势事件x方向的位移值, 向左移动时为负数
distanceY, y 手势事件y方向的位移值, 向上移动时为负数
angle rotate事件触发时旋转的角度
duration touchstart 与 touchend之间的时间戳
factor swipe事件加速度因子
startRotate 启动单指旋转方法，在某个元素的touchstart触发时调用

小试牛刀：

公共

  1. <script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
  1. <body>
  2. <div id="playarea">
  3. <img id="target" draggable="false" src="img/cloud.png" class="show" >
  4. </div>
  5. </body>

》旋转rotate

》滑动swiper

》拖动drag

》单击tap,双击doubletap,长按hold

touch.on('#target', 'hold tap doubletap', function(ev){  }//多个手势同个效果，用空格隔开即可

事件(包括鼠标事件)发生的顺序如下： 

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

touch.js——常见应用操作的更多相关文章

  1. touch.js 手机端的操作手势

    使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.

  2. touch.js——手机端的操作手势

    TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指 ...

  3. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

  4. touch.js下载使用方式

    touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...

  5. Selenium 定位页面元素 以及总结页面常见的元素 以及总结用户常见的操作

    1. Selenium常见的定位页面元素 2.页面常见的元素 3. 用户常见的操作 1. Selenium常见的定位页面元素 driver.findElement(By.id());driver.fi ...

  6. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  7. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  8. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  9. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

随机推荐

  1. 33、线程与全局解释器锁（GIL）

    之前我们学了很多进程间的通信,多进程并发等等,今天我们来学习线程,线程和进程是什么关系,进程和线程有什么相同而又有什么不同今天就来揭晓这个答案. 一.线程概论 1.何为线程 每个进程有一个地址空间,而 ...

  2. Java对象中的finalize()方法使用说明

    我在写java程序的时候,从来没有遇见过是用Object.finalize()的时候,但是在学习Java虚拟机的垃圾回收机制时,虚拟机在进行垃圾回收时需要使用finalize()方法来进行对象清理.下 ...

  3. java Io流中FileInputStream和BufferedInputStream的速度比较

    首先是对FileInputStream 加上 FileOutputStream 对文件拷贝的应用 我这里拷贝的是一个视频.当然,你们拷贝什么都可以,当文件越大时效果越明显 下面是对BufferedIn ...

  4. Windows下mysql忘记root密码

    1. 首先检查mysql服务是否启动,若已启动则先将其停止服务,可在开始菜单的运行,使用命令: net stop mysql 打开第一个cmd窗口,切换到mysql的bin目录,运行命令: mysql ...

  5. 浅析HTTP协议的请求报文和响应报文

    1.HTTP协议与报文简介  HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. 而客户端与服务端通信时 ...

  6. Nginx + Memcached 实现Session共享的负载均衡

    session共享 我们在做站点的试试,通常需要保存用户的一些基本信息,比如登录就会用到Session:当使用Nginx做负载均衡的时候,用户浏览站点的时候会被分配到不同的服务器上,此时如果登录后Se ...

  7. Ubuntu操作系统下安装JDK、tomcat、mysql

    1.先从安装虚拟机开始 01.首先打开VMware虚拟机.     02.然后,进入home主页,点击"create a New Virtual Machine"一栏,就会弹出一个 ...

  8. 九度OJ 1014 排名

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  9. 团队作业8——Beta 阶段冲刺7th day

    一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 完善支付功能 (2)今天计划完成的工作(具体如下) 测试与正式发布 (3) 工作中遇到的困难(在表格中) 成员 昨天已完成 ...

  10. 学号：201521123116 《java程序设计》第六周学习总结

    1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2.书面作业 1.1.Object对象中的clone方法是 ...