zoukankan      html  css  js  c++  java
  • Touch移动端事件

    1.移动端原生事件

    (1) 移动端原生三大事件

    ① touchstart:触摸开始事件  当手指按在屏幕上触发该事件

    ② touchmove:触摸移动事件  当手指按在屏幕上 并移动 触发该事件

    ③ touchend:触摸结束事件  当手指离开屏幕触发该事件

    ④ 注意:在切换到浏览器的移动端模拟器中的时候 需要 刷新页面 才能实现效果

    ⑤ 注意:浏览器的移动端模拟器 不稳定 因此用on方式添加的事件有时会不能执行,因此我们一般使用addEventListener来绑定移动端事件

    (2) 移动端事件的问题

    ① 移动端中不能使用PC端事件,有些pc端事件在移动端中会出现效果问题,另一些虽然效果没问题,但会延迟300ms执行。

    ② 

    (3) 移动端事件的事件对象

    ① 移动端事件的事件对象 就是处理函数的第一个形参

    ② 

    ③ 移动端事件对象中独有的属性

    1) touches:当前屏幕上所有手指的集合(是一个伪数组,每一个数组项是一个对象,用来记录手指信息,有几根手指就有几个对象)

    2) targetTouches:当前dom元素中存在的手指集合

    3) changedTouches:当前触发事件的手指集合(一般常用)

    2.Touch.js 插件

    (1) Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.

    (2) Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用。

    (3) Touch.js绑定事件

    ① 方式:touch.on(添加事件的元素,“事件类型”,function(){事件处理函数})

    ② 一次性绑定多个事件:touch.on(元素,时间类型1 事件类型2 ...”,function(){})

    (4) Touch.js事件委托

    ① 方式:touch.on(共同的父元素, 事件类型, 子元素选择器,处理函数);

    ② Touch的事件委托 会将 事件绑定给 父元素 根据子元素选择器 选中父元素中指定的子元素,一旦点击这些子元素 就执行处理函数

    (5) Touch事件的事件对象

    ① 获取方式:

    ② 

    ③ 事件对象中的重要属性

    1) originEvent:原始事件对象 封装的事件的事件对象

    2) startRotate:开始旋转 是一个开关 调用之后 才可以使用旋转类手势事件

    (6) Touch.js的手势事件 及 实例

    ① 点击类事件:tap单击事件  doubletap双击事件  hold长按事件700ms以上

    ② 滑动类事件

    1) swipestart滑动手势起点事件  当用户按住屏幕并刚刚开始滑动的时候就触发该事件 只触发一次

    2) swiping滑动中  在用户滑动的全过程中 会不断触发该事件

    3) swipeend滑动手势终点  当用户松手结束滑动的时候触发

    拖动类事件

    ⑴dragstart 拖动开始

    ⑵drag 拖动

    ⑶dragend 拖动结束

    ④旋转类事件

    ⑴rotateleft 向左旋转

    ⑵totateright 向右旋转

    ⑶rotate 旋转

    缩放类事件

    ⑴pinchstart 缩放手势起点

    ⑵pinchend 缩放手势终点

    ⑶pinch 缩放手势

    ⑷pinchin 收缩

    ⑸pinchout 放大

  • 相关阅读:
    arr.forEach()与for...in的用法举例
    git
    hql查询
    JAVA Hibernate工作原理及为什么要用
    mysql中key 、primary key 、unique key 与index区别
    aop
    hibernate json数据死循环
    nginx 转帖
    Maven搭建web项目
    ajaxfileupload 附加参数
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13813106.html
Copyright © 2011-2022 走看看