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. Spring集成RabbitMQ-必须知道的几个概念

    上篇<Spring集成RabbiMQ-Spring AMQP新特性>我们了解了最新spring-rabbit的2.0.0.M5版本相较于之前有哪些变化.其实使用Spring-amqp确实简 ...

  2. 部署和使用kibana

    背景 上一篇介绍了在阿里云上部署ES,本文将主要介绍ELK的可视化工具Kibana的部署和使用.主要分为三个步骤来实现最终呈现: 1.导入数据到ES: 2.部署kibana并完成配置: 3.使用kib ...

  3. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. pyhton安装pillow问题解决

    最近在学习Python的微信处理相关,因wxpy库中的微信客户端需要接收二维码需要安装pillow,如下 class wxpy.Bot(cache_path=None, console_qr=Fals ...

  5. hibernate 基本配置文件及CRDU的操作和基本的HQL查询

    以下所有内容保存在 E:\JavaWebSrc\firstHibernate 目录中,项目名称为firstHibernate,使用IDEA打开,项目所需jar包在  F:\常用综合\常用jar包\hi ...

  6. jvm系列 (四) ---强、软、弱、虚引用

    java引用 目录 jvm系列(一):jvm内存区域与溢出 jvm系列(二):垃圾收集器与内存分配策略 jvm系列(三):锁的优化 我的博客目录 为什么将引用分为不同的强度 因为我们需要实现这样一种情 ...

  7. 通过业务系统的重构实践DDD

    最近新接了一个业务系统——社区服务系统,为了快速熟悉和梳理老系统的业务逻辑和代码,同时对老系统代码做一些优化,于是打算花上一个月时间不间断地对老系统服务进行重构.同时,考虑到社区业务的复杂性,想起了之 ...

  8. STEP 7-MicroWIN SMART 西门子PLC再次安装问题

    我的电脑第一次安装s7(STEP 7-MicroWIN SMART 西门子PLC)是没有问题的,有一次不小心删除,再次安装却怎么也安装不上.猫那个咪的!Why! 网上各种查资料,完全不能解决问题,有的 ...

  9. idea 给maven项目添加依赖(二)

    这里接着上一篇来 我们观察目录发现有两个pom.xml(project object module) 项目是里面的,所以外面的先不管它. 点击里面的pom.xml 1.在<url>节点下面 ...

  10. alert执行顺序

    <p><span id="span1">Hello World!</span></p> <script type=" ...