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. PyQt4简单小demo

    #coding=utf-8 import sys from PyQt4.QtCore import * from PyQt4.QtGui import * class FontPropertiesDl ...

  2. Spring（四）-- JdbcTemplate、声明式事务

    1.Spring提供的一个操作数据库的技术JdbcTemplate,是对Jdbc的封装.语法风格非常接近DBUtils.   JdbcTemplate可以直接操作数据库,加快效率,而且学这个JdbcT ...

  3. Openfire分析之一：Openfire与XMPP协议

     引言 上帝说,要有光,于是就有了光. 有点玄. 如果将时光回溯无数岁月,到几百万年的蛮荒时代,人类史上第一次发生信息交换,会是什么样子?是转一下脑袋,还是眨一下眼? 但不管是什么形式,于是有了信息, ...

  4. python进阶学习（二）

    本节学习图形用户界面 ------------------------ 本节介绍如何创建python程序的图形用户界面(GUI),也就是那些带有按钮和文本框的窗口.这里介绍wxPython : 下载地 ...

  5. 再起航，我的学习笔记之JavaScript设计模式17(模板方法模式)

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  6. js事件汇总

    常用事件: 1.鼠标事件:onClick,onDblClick,onMouseDown,onMouseUp,onMouseOut,onMouseOver ·onClick:单击页面元素时发生,onDb ...

  7. 关于mysql的Fetch Time 和 Duration Time

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt411 Stackowerflow 上关于这两个时间有人这样解释 Fetch ...

  8. 从网络获取json数据，使用imageloader获取网络图片资源并显示在ListView上

    http://www.93.gov.cn/93app/data.do?channelId=0&startNum=0 这是一个接口,通过这个接口来获取数据并解析 大体上就是把解析的数据还有图片u ...

  9. Git简易参考手册

    如果用过mercury(HG),那么理解Git的运作方式就轻松多了.两者是相同的分布式版本管理工具,只是某些功能有着细微的差别 - Git的管理粒度更加细腻,因此操作上也比HG复杂一点.例如,修改文件 ...

  10. UTF-8编码规则【转】

    hz_chenwenbiao UTF-8编码规则(转) UTF-8是Unicode的一种实现方式,也就是它的字节结构有特殊要求,所以我们说一个汉字的范围是0X4E00到0x9FA5,是指unicode ...