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. ReactNative环境搭建扩展篇——安装后报错解决方案

    之前一篇写了<逻辑性最强的React Native环境搭建与调试>说了RN的安装,今天在这里做一个复盘,让我们能够更直观更深入的了解React Native(以下简称RN),这一篇重点来说 ...

  2. Thinkjs学习1—概述及MVC的粗略理解

    1.概述 ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架,对于之前是纯前端的童鞋,可能不了解MVC框架是什么,不知道后台和前台怎么配合. 本教程以Thinkjs2 ...

  3. 又一流氓推广Microsoft Edge，我勒个去

    最新的Windows10 的升级也是醉了,不得不吐槽一个非常流氓的浏览器推广:Microsoft Edge(这小婊砸). 为了将之前的历史包袱IE干掉,这次微软也是蛮拼的,直接把IE从电脑里干掉了,你 ...

  4. .net分布式压力测试工具(Beetle.DT)

    肯定有人会问为什么会写这样一个开源工具?和现有的有什么差别?不过对于一个程序员来说写东西还真不需要理由的:),主要原因是工作有点闲(开玩笑),不过说实话一个程员怎可能会停止写代码呢(作为一个奔4的程序 ...

  5. 神奇的background

    background:url() fixed ....  可以实现页面向下滚动时背景图片 保持位置不变   感觉好像背景在随鼠标滚动而滚动一样

  6. （转载）深入Java关键字this的用法的总结

    在Java程序设计中经常会见到this的使用,this使得程序设计变得规范.简单.灵活.但是在使用过程中,在不同场 合它的含义并不完全相同,使用不当还会出现错误, 本文对this的几种用法和出现的问题 ...

  7. 字符编码知识简介和iconv函数的简单使用

    字符编码知识简介和iconv函数的简单使用 字符编码知识简介 我们知道,在计算机的世界其实只有0和1.期初计算机主要用于科学计算,而我们知道一个数,除了用我们常用对10进制表示,也可以用2进制表示,所 ...

  8. 正则表达式过滤HTML、JS、CSS

    功能用途 主要是用来提取html页面内容时使用. 示例代码 using System; using System.Collections.Generic; using System.Linq; usi ...

  9. 堆排序Java实现

    package practice; import edu.princeton.cs.algs4.StdRandom; public class TestMain { public static voi ...

  10. plsql developer 恢复默认布局界面

    tools-preferences-appearance-(reset docking,reset toolbars)