手机端html5触屏事件(touch事件)
2015-12-18 18:50
411 查看
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touchsession)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touchsession)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
varobj=document.getElementByIdx_x('id'); obj.addEventListener('touchmove',function(event){ //如果这个元素的位置内只有一个手指的话 if(event.targetTouches.length==1){ event.preventDefault();//阻止浏览器默认事件,重要 vartouch=event.targetTouches[0]; //把元素放在手指所在的位置 obj.style.left=touch.pageX-50+'px'; obj.style.top=touch.pageY-50+'px'; } },false);
相关文章推荐
- NSDate iOS 日期
- js 判断微信浏览器(转)
- Android开发环境的搭建之(二)Android Studio的安装
- IOS设备设计完整指南
- iOS Xcode工程目录的 folder 和 group的区别(蓝色和黄色文件夹的区别)
- Android 快速开发系列 打造万能的ListView GridView 适配器
- unity3d 依据指定的Assets下的目录路径 返回这个路径下的全部文件名称
- android 跑马灯效果
- Android四大组件之一Activity详解
- iOS拼接字符串
- iOS邮箱正则表达式
- iOS判断为空
- 《Object-OC 里面调用JS 和 接入是遇到的问题的解决》
- Android 判断字符串是否是身份证、邮箱、银行卡、手机号、中文
- IOS高仿三九脑科医院综合查询系统-列表查询+切换+代理传值+打开视图
- Android 工具类 - Log
- LayoutInflater的使用
- 深入剖析Android四大组件(八)——结束Activity的4个阶段
- Android Studio系列(四)Version Control II Annotate.md
- Android一点 RecyclerView上拉刷新