zoukankan      html  css  js  c++  java
  • <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线。

    下图是各种触摸事件说明:

    本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库:

    • QUO JS 
      Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag
      Other features: Built-in jQuery-like methods. It uses $$ to avoid conflict.
      File size: 13KB minified
      Standlone: Yes
    • Hammer JS 
      Events: 
      Tap, Double tap, hold, drag, transform (pinch)
      Other features: Javascript library focused only for multi-touch gestures
      File size: 2KB minified
      Standlone: Yes
    • Touchy 
      Events: 
      long press, drag, pinch, rotate, swipe
      Other features: jQuery plugin for webkit browsers and browsers that support outch events
      File size: ~2.72KB minified
      Standlone: No, need jQuery framework
    • Mootools-mobile 
      Events: 
      Swipe, pinch, touch hold 
      Other features: Touch events are separated into different files.
      File size: -
      Standlone: No, need MooTools 
    • jQuery doubletap 
      Events: 
      Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe down
      Other features: No android support yet
      File size: 4KB
      Standlone: No, need jQuery
    • jGestures 
      Events: 
      Orientation change, Pinch, Rotate, Swipe move, Swipe in multi direction, Swipe with 1,2,3 fingers, Tap with 1,2,3 fingers, pinch open, pinch close, shake in different directions
      Other features: Bundled with many gestures and useful events
      File size: 16KB minified 
      Standlone: No, need jQuery
    • Touch Swipe 
      Events: 
      Swipes in 4 directions, 1,2 fingers touch
      Other features: Allows swiping and page scrolling
      File size: 25KB
      Standlone: No, need jQuery 
    • Touchable 
      Events: 
      Tap, Long Tap, Double tap, touchable move, touchable end
      Other features: Unifies touch and mouse events
      File size: 1.96KB
      Standlone: No, need jQuery
    • thumbs.js 
      Events: 
      touch start, touch end, touch end, touch move, mouse down, mouse up, mouse move
      Other features: PhoneGap and mobile web friendly
      File size: 612 bytes minified
      Standlone: Yes
    • jQuery.pep.js 
      Events: 
      Drag
      Other features: Uses CSS3 animations, built-in many drag features
      File size: 16KB
      Standlone: No, need jQuery
    • Jetster 
      Events: 
      Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
      Other features: Jester makes recognising gestures on DOM elements really easy
      File size: 25KB
      Standlone: Yes
     

    官网地址:http://jgestures.codeplex.com/
    文档版本号: v0.7,由neuedigitale编辑,2012年5月8日
    最新稳定版:  jGestures v0.90 - shake

    jGestures简介

    jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向)。当然,部分事件在PC浏览器上可以通过转换实现。比如 "tapone" 事件可以被 "clicking"事件触发,鼠标手势也可以产生"swipe"事件。

    使用示例

    [javascript] view plaincopy
     
    1. $('#swipe').bind('swipeone',eventHandler);  


    事件列表

    orientationchange
    代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器.

    pinch
    缩放手势(两个手指在屏幕上的相对运动)

    rotate
    旋转手势(两个手指顺时针或者逆时针旋转)

    swipemove
    在正在滑动时触发(在设备屏幕上移动手指,比如:拖动)

    swipeone
    单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)

    swipetwo
    两点滑动(两个手指在屏幕上方向一致的滑动)

    swipethree
    三点滑动(三个手指在屏幕上方向一致的滑动)

    swipefour
    四点滑动(四个手指在屏幕上方向一致的滑动)

    swipeup
    向上滑动,在严格的向上滑动手势完成后触发

    swiperightup
    向右上角滑动,在向右且向上的滑动手势完成后触发

    swiperight
    向右滑动,在严格的向右滑动手势完成后触发

    swiperightdown
    向右下角滑动,在向右且向下的滑动手势完成后触发

    swipedown
    向下滑动,在严格的向下滑动手势完成后触发

    swipeleftdown
    向左下角滑动,在向左且向下的滑动手势完成后触发

    swipeleft
    向左滑动,在严格的向左滑动手势完成后触发

    swipeleftup
    向左上角滑动,在向左且向上的滑动手势完成后触发

    tapone
    在单个手指轻点的手势后触发

    taptwo
    在两个手指一起轻点的手势后触发

    tapthree
    在三个手指一起轻点的手势后触发

    pinchopen
    撑开手势,当两个手指撑大并离开设备时触发.

    pinchclose
    捏紧手势,当两个手指捏紧并离开设备时触发.

    rotatecw
    两个手指顺时针旋转并且离开屏幕时触发(two fingers rotating clockwise)

    rotateccw
    两个手指逆时针旋转并且离开屏幕时触发 (two fingers rotating counterclockwise)

    shake
    当检测到设备正在摇晃时触发

    shakefrontback
    当检测到摇晃动作,且可以被解读为前后移动之时触发.

    shakeleftright
    当检测到摇晃动作,且可以被解读为左右移动之时触发.

    shakeupdown
    当检测到摇晃动作,且可以被解读为上下移动之时触发.

  • 相关阅读:
    nodejs sequelize 对应数据库操作符的定义
    nodejs利用sequelize-auto 根据数据库的table 生成model
    微信小程序: rpx与px,rem相互转换
    vue 父组件通过props向子组件传递数据/方法的方式
    小程序-wepy学习
    [考试反思]1026csp-s模拟测试88:发展
    [考试反思]1025csp-s模拟测试87:生存
    [考试反思]1024csp-s模拟测试86:消耗
    [考试反思]1024csp-s模拟测试85:以为
    [考试反思]1023csp-s模拟测试84:精妙
  • 原文地址:https://www.cnblogs.com/zhwl/p/3525235.html
Copyright © 2011-2022 走看看