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事件和滚动没什么关系,它只是一个事件。
2014-08-28——移动端,触摸事件 touchstart、touchmove、touchend、touchcancel的更多相关文章
- HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
- HTML5触摸事件(touchstart、touchmove和touchend) (转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 移动端touchstart,touchmove,touchend
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- 获取touchstart,touchmove,touchend 坐标
简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...
- touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
随机推荐
- linux归档压缩命令
1.tar tar -cf output.tar file1.txt file2.txt .. tar -rvf output.tar fl ...
- 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 ...
- hystrix-turbine实现多服务监控
原文地址:http://www.cnblogs.com/skyblog/p/5633757.html 1. 概述 Demo地址:http://git.oschina.net/zhou666/spr ...
- NIO之管道 (Pipe)
Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 代码使用示例: public static v ...
- 基于注解的Mybatis mapper 接口注意事项
基于注解的Mybatis mapper 接口功能没有mapper xml配置文件丰富,并且动态sql语句的灵活性不能和xml配置相比. 这里仅仅说一下基于注解的动态sql注意事项: Mybatis提供 ...
- grub的三种安装方式
1.install命令 install: install [--stage2=STAGE2_FILE] [--force-lba] STAGE1 [d] DEVICE STAGE2 [ADDR] [p ...
- 一、Core Animation简介
一.Core Animation简介 * Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代 ...
- 李洪强-CALayer4-自定义层
自定义层,其实就是在层上绘图,一共有2种方法,下面详细介绍一下. 一.自定义层的方法1 方法描述:创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进 ...
- pdfBox 读取pdf文件
1.引入maven依赖 <dependency> <groupId>org.apache.pdfbox</groupId> <artifactId>pd ...
- 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 ...