html5 移动端触发的基本事件
来源:互联网 发布:ios淘宝hd历史版本 编辑:程序博客网 时间:2024/05/31 04:03
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。
var
obj = document.getElementByIdx_x(
'id'
);
obj.addEventListener(
'touchmove'
,
function
(event) {
// 如果这个元素的位置内只有一个手指的话
if
(event.targetTouches.length == 1) {
event.preventDefault();
// 阻止浏览器默认事件,重要
var
touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 +
'px'
;
obj.style.top = touch.pageY-50 +
'px'
;
}
},
false
);
0 0
- html5 移动端触发的基本事件
- 移动端触发onmousemoveout事件
- 移动端触发touch事件同时触发click事件的相关解决方法
- 移动端左划右划事件触发简单的代码
- 移动端基本事件
- scroll事件在移动端多次触发
- html5移动端手势事件
- HTML5 移动端 手指事件
- 移动端 jquery 长按触发移动事件 <升级版>
- html5 移动端的手指触屏事件
- HTML5移动端开发的常用触摸事件
- <html5+css3+js>事件触发js代码的不同方式
- html5系列:伪主动触发input:file的click事件
- html5 datalist 选中option选项后的触发事件
- 滚动条移动触发事件
- 解决移动端滚动页面释放时所触发的tounchend事件
- 【移动端】iOS下setTimeout无法触发focus事件的解决方案
- 让移动端页面滚动后不触发touchend事件的方法
- ahk自动上传文件的脚本实例
- 面试题--死锁
- oracle中all,any的区别使用
- 如何在日常交流中选择合适的投资人?
- 1025 选菜(codevs)
- html5 移动端触发的基本事件
- java连接sql server
- 数据结构之用递归和非递归方法计算斐波那契数列的第n项
- 首个眼动VR头盔FOVE评测:用“眼神”玩游戏有多酸爽?
- JAVA知识点
- oracle安装联网的问题
- USACO2.1 顺序的分数 Ordered Fractions
- poj2664
- Io 异常: The Network Adapter could not establish the connection