整理HTML5移动端开发的常用触摸事件


Posted in HTML / CSS onApril 15, 2016

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

一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端的鼠标和键盘事件是不够用的。

在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。

上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。

touches:表示当前跟踪的触摸操作的touch对象的数组。

targetTouches:特定于事件目标的Touch对象的数组。

changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触目的DOM节点目标。

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

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

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

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

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

JavaScript操作小例子:

JavaScript Code复制内容到剪贴板
  1. var obj = document.getElementByIdx_x('id');   
  2. obj.addEventListener('touchmove'function(event) {   
  3.      // 如果这个元素的位置内只有一个手指的话   
  4.     if (event.targetTouches.length == 1) {   
  5.  event.preventDefault();

    // 阻止浏览器默认事件,重要    
  6.         var touch = event.targetTouches[0];   
  7.         // 把元素放在手指所在的位置   
  8.         obj.style.left = touch.pageX-50 + 'px';   
  9.         obj.style.top = touch.pageY-50 + 'px';   
  10.         }   
  11. }, false);  
HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 #HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 #HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 #HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 #HTML / CSS
用html5绘制折线图的实例代码
Mar 25 #HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 #HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 #HTML / CSS
You might like
php以post形式发送xml的方法
2014/11/04 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
JS控制表格隔行变色
2006/06/26 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python私有属性和方法实例分析
2015/01/15 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python发送告警邮件脚本
2018/09/17 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
2014信息公开实施方案
2014/02/22 职场文书
公益广告标语
2014/06/19 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
顶岗实习计划书
2015/01/16 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
如何在Python中创建二叉树
2021/03/30 Python