转:手机端html5触屏事件(touch事件)
2024-09-03 13:15:23
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:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
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
);
最新文章
- [gist]在浏览器里免查看源代码格式化var_dump输出
- 没有Iphone也能装逼:让Android版QQ显示成Iphone6
- 关于 Cannot forward after response has been committed的错误
- 网球pt站 T3nnis 情况说明
- 《Google软件测试之道》测试工程师
- js 捕获浏览器后退事件
- 【php增删改查实例】 第三节 - mysql 建表
- bzoj1345 序列问题 (贪心)
- ibatis.net:第二天,Hello,World ?
- Bootstrap-CSS:网格系统
- [报错] Xcode Error-Could not insert new outlet connection: Could not find any information for the class named ";xxx";
- django notes 一:开篇
- 【转载】用C#编写一个简单的记事本
- application.properties 改成 application.yml
- Promise小结
- CentOS 7安装与配置jdk-8u162
- python 之 匿名函数
- ubuntu wsl 子系统使用win10 系统ss代理步骤
- linux更改gitlab存储位置
- P3225 [HNOI2012]矿场搭建 割点 tarjan 双联通分量