JavaScript笔记(touch事件)
来源:互联网 发布:杨紫宁丹琳 知乎 编辑:程序博客网 时间:2024/05/21 15:06
参考文章:《touch事件中的touches、targetTouches和changedTouches详解》,《移动互联网终端的touch事件,touchstart, touchend, touchmove》
1 触摸事件
touchstart
,touchmove
,touchend
,这三种是移动设备广泛实现的基本触摸事件,通过三者组合,可以完成诸如“长按”,“点击”,“滑动”等移动端特定的操作。
touchstart
事件:当手指触摸屏幕中的DOM对象;touchmove
事件:当手指触摸屏幕中的DOM对象后,拖动;touchend
事件:当手指离开屏幕
1.1 触摸列表
以上 touchstart
,touchmove
,touchend
每个事件都拥有三个触摸列表,分别是:
touches
:当前屏幕上所有触摸点的列表;targetTouches
:当前对象中所有触摸点的列表;changedTouches
:涉及当前(引发)事件的触摸点的列表
举例子说明以上三个触摸列表的说明:
1、当使用一个手指触摸屏幕,引起事件触发时,三个列表属性都拥有相同的数值。
2、在情况一的状况下,再使用第二个手指触摸屏幕,引起事件触发时,此时的各列表的属性情况为:
touches
:拥有两个元素,每个手指触摸点为一个元素值targetTouches
:当这两个手指都触碰的是相同元素时,touches
和targetTouches
的元素值相同,否则只有一个元素值changeTouches
:changedTouches
此时只有一个元素值,为第二个手指的触摸点,因为第二个手指是引发事件的原因
3、用两个手指同时接触屏幕,此时 changedTouches
有两个值,每一个手指的触摸点都有一个值
4、手指滑动时,三个值都会发生变化
5、一个手指离开屏幕,touches
和 targetTouches
中对应的元素会同时移除,而 changedTouches
仍然会存在元素值,此值为最后一个离开屏幕的手指的接触点
1.2 触点坐标的获取
1、touchstart
和 touchmove
使用:e.targetTouches[0].pageX
或 e.originalEvent.targetTouches[0].pageX
(使用jquery)
2、touchend
使用:e.changedTouches[0].pageX
或 e.originalEvent.changedTouches[0].pageX
(使用jquery)
- JavaScript笔记(touch事件)
- Javascript touch事件实现
- javascript touch事件
- javascript:touch事件
- Sencha Touch学习笔记(五)事件
- touch事件笔记
- javascript——touch事件
- javascript——touch事件
- 【转】javascript——touch事件(转)
- Android Touch事件分发笔记
- Cocos2d-x学习笔记(九)-------->Touch事件处理机制
- JavaScript笔记(事件属性)
- 事件组件sencha touch 学习笔记
- iOS学习笔记-----UIView的Touch事件
- cocos2d-html5学习笔记(四)--键盘事件和touch事件
- cocos2d-html5学习笔记(四)--键盘事件和touch事件
- cocos2d-html5学习笔记(四)--键盘事件和touch事件
- android touch事件(一)
- C语言第二次考试(改正)
- 深度学习概述<一>深度学习知识结构介绍
- AVLTree 学习
- Golang程序结构概述
- Ubantu安装
- JavaScript笔记(touch事件)
- [SET维护DP] Codeforces #875E. Delivery Club
- 文章标题
- asp.net导出Excel乱码的原因及解决方法
- 兼容性测试的测试点
- ant复制
- Java线程面试题 Top 50
- uva10336
- cocos2d-x 3.0对label的改进