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事件和滚动没什么关系,它只是一个事件。

2014-08-28——移动端,触摸事件 touchstart、touchmove、touchend、touchcancel的更多相关文章

  1. HTML5移动端触摸事件

    一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...

  2. HTML5触摸事件(touchstart、touchmove和touchend) (转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  6. HTML5触摸事件(touchstart、touchmove和touchend)

      HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...

  7. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  8. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  9. 获取touchstart,touchmove,touchend 坐标

    简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...

  10. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

随机推荐

  1. linux归档压缩命令

    1.tar     tar    -cf    output.tar    file1.txt     file2.txt ..     tar    -rvf    output.tar    fl ...

  2. python学习日记:np.newaxis

    import numpy as np label = np.array([[1,2,3,4],[5,6,7,8]])print (label.shape)label = label[np.newaxi ...

  3. hystrix-turbine实现多服务监控

    原文地址:http://www.cnblogs.com/skyblog/p/5633757.html 1.   概述 Demo地址:http://git.oschina.net/zhou666/spr ...

  4. NIO之管道 (Pipe)

    Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 代码使用示例: public static v ...

  5. 基于注解的Mybatis mapper 接口注意事项

    基于注解的Mybatis mapper 接口功能没有mapper xml配置文件丰富,并且动态sql语句的灵活性不能和xml配置相比. 这里仅仅说一下基于注解的动态sql注意事项: Mybatis提供 ...

  6. grub的三种安装方式

    1.install命令 install: install [--stage2=STAGE2_FILE] [--force-lba] STAGE1 [d] DEVICE STAGE2 [ADDR] [p ...

  7. 一、Core Animation简介

    一.Core Animation简介 * Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代 ...

  8. 李洪强-CALayer4-自定义层

    自定义层,其实就是在层上绘图,一共有2种方法,下面详细介绍一下. 一.自定义层的方法1 方法描述:创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进 ...

  9. pdfBox 读取pdf文件

    1.引入maven依赖 <dependency> <groupId>org.apache.pdfbox</groupId> <artifactId>pd ...

  10. java.lang.IllegalStateException: class utils.filter.ContentFilter is not a javax.servlet.Filter

    1.错误描写叙述 2016-01-12 11:27:01.787:WARN:oejuc.AbstractLifeCycle:FAILED ContentFilter: java.lang.Illega ...