整理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打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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字符串过滤与替换小结
2015/01/26 PHP
php的扩展写法总结
2019/05/14 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
js实现数组转换成json
2015/06/26 Javascript
js密码强度检测
2016/01/07 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python 创建子进程模块subprocess详解
2015/04/08 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
python集合是否可变总结
2019/06/20 Python
Python time库基本使用方法分析
2019/12/13 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
管理心得体会
2013/12/28 职场文书
高校十八大报告感想
2014/01/27 职场文书
公司授权委托书样本
2014/09/15 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2015国庆节宣传语
2015/07/14 职场文书
安全主题班会教案
2015/08/12 职场文书
聘任通知书
2015/09/21 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书