zoukankan      html  css  js  c++  java
  • 2014-08-28——移动端,触摸事件 touchstart、touchmove、touchend、touchcancel

    1、Touch事件简介
    在移动终端上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
    当按下手指时,触发ontouchstart。
    当移动手指时,触发ontouchmove。
    当移走手指时,触发ontouchend。
    当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。(一般会在ontouchcancel时暂停游戏、存档等操作。)

    2、Touch事件与Mouse事件的出发关系
    在 触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变。如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。


    3、gesture事件
    Gesture 事件,包括手指点击(click),轻拂 (flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情,它只在有两根或多根手指放在屏幕上的时候触发,事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息。这个事件是对touch事件的更高层的封装,和touch一样,它同样包括 gesturestart,gesturechange,gestureend。
    gesture事件触发过程:
    Step 1、第一根手指放下,触发touchstart
    Step 2、第二根手指放下,触发gesturestart
    Step 3、触发第二根手指的touchstart
    Step 4、立即触发gesturechange
    Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
    Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
    Step 7、触发第二根手指的touchend
    Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
    Step 9、提起第一根手指,触发touchend

    touch事件和浏览器滚动分析

    事件冒泡的顺序:element -> document.body -> document.documentElement

    不要使用ontouchstart,ontouchmove,ontouchend,ontouchcancel,google浏览器模拟时不能正确触发。

    不要使用return false; 很诡异。

    想要阻止元素级别的的滚动,在对应的元素上对touchstart或touchmove事件使用e.preventDefault();滑动页面其它地方,页面依旧可以滚动。

    想要阻止浏览器级别的滚动,在document.body或document.documentElement上对touchstart或touchmove事件使用e.preventDefault();此时,页面完全不能滚动(包括所有滚动元素)。

    对touchstart事件使用,e.preventDefault()会使得各种输入框不能聚焦。

    e.stopPropagation(); 能够阻止事件冒泡,但无论怎么使用都不能阻止滚动。touchstart和touchmove事件和滚动没什么关系,它只是一个事件。

  • 相关阅读:
    Deploying a web application to Jetty
    在java语言中执行jruby
    自制chuncked http streaming 流
    ubuntu11.10 rails开发集成vim相关问题
    通过drb集成java和ruby环境
    使用Java Web Start部署JRuby应用
    JRuby使用经验 Ruby language ITeye论坛
    使用Trinidad當Jruby Server.
    高雄 linux usergroup
    Jruby On Rails 的安装及部署实践
  • 原文地址:https://www.cnblogs.com/bugong/p/3942988.html
Copyright © 2011-2022 走看看