手机触摸touch事件

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

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

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

时间: 2024-10-26 02:53:50

手机触摸touch事件的相关文章

手机的touch事件(基于jquery)

javascript代码: $.swipe=function(opt){  var o = $.extend({    mainSelector:"",    swipeLeft:function(e,v){},    swipeRight:function(e,v){},    swipeEnds:function(v,e){}}, opt || {});  var startX=0,startY=0;var obj={    touchStart: function (e){   

android 触摸touch事件的派送和传递

1.touch事件从Activity开始向下逐层派发 一直派发到焦点控件进行处理 2.如果控件的事件处理方法返回true 则,该控件消费且持续关注此事件 否则,该事件向该控件的上一层容器传递 3.控件的touch监听器的onTouch方法 先于 控件本身的onTouchEvent执行 Touch事件派发和处理的方法 dispatchTouchEvent onInterceptTouchEvent(只有ViewGroup有该拦截方法) onTouchListener.onTouch onTouch

手机touch事件

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

手机站建设HTML5触摸屏touch事件使用介绍

手机站建设HTML5触摸屏touch事件使用介绍技术 maybe yes 发表于2015-01-05 14:42 原文链接 : http://blog.lmlphp.com/archives/56  来自 : LMLPHP后院 市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好.PC上还没有哪个事件是可以与触屏手机的触摸事件对

Touch事件or手机卫士面试题整理回答(二)

Touch事件or手机卫士面试题整理回答(二) 自定义控件 1. Touch事件的传递机制 顶级View->父View->子View,不处理逆向返回 OnInterceptTouchEvent(),返回值控制Touch是否向下传递. true中断事件,false不中断事件. onTouchEvent() 返回值决定否处理事件.True消耗事件,False不处理事件向上传递. 2. 轮播动画的实现原理 ViewPage和TextView组合实现图片和标题的效果 ViewPage设置setOnPa

Zepto.js touch模块深入分析 解决手机点击事件

源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ; (function($) { var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1

通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown,mousemove,mouveup非常类似,不同的是touch事件可以有多个点击的点,而鼠标每次只有一个点,我们即然是做组件封装,就要考虑在pc上调试的情况,否则用手机调试非常不方便,通过对mouse事件的处理,可以一套代码同时兼容pc端和移动端. 下面来逐步封装一个滑动手势(swipe)的组件

移动端开发概览【webview和touch事件】

Android vs Ios 我在webkit内核的chrome中进行开发的页面,拿着iPhone和安卓机来进行测试,传说中它们的浏览器内核也是WebKit,那么问题来了,同样的页面为什么在ios中和安卓中表现不同,出现了各种稀奇古怪的bug... 我尝试找下两者的根本区别: - iOS 随着2007年6月29日iPhone的上市,WebKit进入iPhone OS平台,经过Apple的定制,成为iPhone OS平台独一无二的排版引擎: - Android 在旧版本的安卓中: 熟悉Androi

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件 了解touch事件 在应用touch事件实现上拉加