一、触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

目前移动端浏览器均支持这4个触摸事件,包括IE。由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范

二、规范

这里我们介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。

有了这些信息,我们就可以依据这些事件信息为用户提供不同的反馈了。

下面,我将为大家展示一个小demo,用touchmove实现的单指拖动:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组,其中一个元素代表同一时刻的一个触控点,从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控,所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标,等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

三、手势事件

手势是指利用多点触控进行旋转、拉伸等操作,例如图片、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点 是元素的位置坐标:我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标,但在手机浏览器中页面经常会在使 用中被缩放,那缩放后的元素坐标会改变吗?答案是有所差异。用一个情景来说明这个问题:页面A加载完成后,JavaScript获 取到该元素在document中的坐标为(100,100),接着用户放大了页面,此时用JavaScript再次输出元素坐标,依然还是 (100,100),但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你可以打开那个打砖块游戏demo,等页面完全加载完成后,再放大,此时你会发 现即使手指触摸在“touch here”区域外部,也可以控制到球板,因为区域发生了偏移。除非页面刷新或者恢复缩放,否则偏移量将一直存在。

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1
var scale = e.scale;
//rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针
var angle = e.rotation;
};

四、重力感应

重力感应较简单,只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:
0:与页面首次加载时的方向一致
-90:相对原始方向顺时针转了90°
180:转了180°
90:逆时针转了90°据我测试,Android2.1尚未支持重力感应。以上即目前的触屏事件,这些事件尚未并入标准,但已被广泛使用。本人Android2.1,未在其他环境下测试。

移动端touch触屏滑动事件、滑动触屏事件监听!的更多相关文章

  1. 为不具有change事件的html标签设置监听事件

    change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...

  2. ThinkPHP 数据库操作(六) : 查询事件、事务操作、监听SQL

    查询事件 查询事件(V5.0.4+) 从 5.0.4+ 版本开始,增加了数据库的CURD操作事件支持,包括: 查询事件仅支持 find . select . insert . update 和 del ...

  3. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  4. H5的Video事件,控制方法,及监听

    1.标签基本属性 src :视频的属性 poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视 ...

  5. bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】

    背景:记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法 问题:需求是展示页面展示用户所属的部门,点击修改按钮后,弹出对应的model,这个时候部门的select要默认选中用户所在的s ...

  6. layer.confirm等事件X关闭与取消监听

    关于layer.confirm的所有操作 layer.confirm('content',{ btn:['确定','取消'], cancel:function(index, layero){ cons ...

  7. cocos creator Touch事件应用(触控选择多个子节点)

    最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...

  8. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  9. ScrollView滑动到底部或顶部监听,ScrollView滑动到底部或顶部再继续滑动监听;

    ScrollView滑动到底部或顶部后,再继续滑动达到一定距离的监听: ScrollView滑动到底部或顶部的监听: /** * 监听ScrollView滚动到顶部或者底部做相关事件拦截 */ pub ...

  10. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

随机推荐

  1. HTC与英特尔联手打造无线VR解决方案

    除了TPCAST无线附件组件之外,HTC早前还宣布了与英特尔合作研发WiGig无线VR解决方案,他们还愿意寻找更多的合作伙伴以带来进一步的解决方案. HTC希望确保其Vive头显可以实现无线升级,让用 ...

  2. SpringMVC一路总结(一)(转)

    itRed You are never too old to set another goal or to dream a new dream. SpringMVC一路总结(一) SpringMVC听 ...

  3. 基于AFN的多张图片上传

    不废话,直接上代码 NSString *urlString = [NSString stringWithFormat:@"http://192.168.1.166:8080/Discipli ...

  4. centos7 搭建elk

    CentOS 7.x安装ELK(Elasticsearch+Logstash+Kibana)  云计算 Aug 162015 第一次听到ELK,是新浪的@ARGV 介绍内部使用ELK的情况和场景,当时 ...

  5. jdk7 HashSet和HashMap源码分析

    先来看看HashMap的一些成员变量以及他们的含义 /** * The default initial capacity - MUST be a power of two. */ static fin ...

  6. 窗口信息获取器 Spy4Win v0.20b 中文绿色版

    软件名称:窗口信息获取器 Spy4Win v0.20b 中文绿色版软件类别:国产软件运行环境:Windows XP软件语言:简体中文授权方式:免费版软件大小:1.67 MB软件等级:整理时间:2012 ...

  7. BAPI_GOODSMVT_CREATE 移动类型201 CODE = '03' 代码

    DATA: MAT_DOC LIKE BAPI2017_GM_HEAD_RET-MAT_DOC.      "物料凭证编号   DATA: GMHEAD LIKE BAPI2017_GM_H ...

  8. Linux Kernel Vhost 架构

    Vhost 回顾 Linux中的vhost驱动程序提供了内核virtio设备仿真. 通常,QEMU用户空间进程模拟guest的I / O访问. Vhost将virtio仿真代码放到内核中,使QEMU用 ...

  9. HTML5入门总结 HTML5API

    w3cshools  MDN英文  MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...

  10. Spring MVC如何进行JSON数据的传输与接受

    本篇文章写给刚接触SpingMVC的同道中人,虽然笔者本身水平也不高,但聊胜于无吧,希望可以给某些人带来帮助 笔者同时再次说明,运行本例时,需注意一些配置文件和网页脚本的路径,因为笔者的文件路径与读者 ...