手机端html5触屏事件(touch事件)

摘要:
触摸开始:触摸开始时触发触摸移动:手指在屏幕上滑动时触发触摸:触摸结束时触发触摸。每个触摸事件包括三个触摸列表,每个触摸列表包含一系列对应的触摸点:触摸:屏幕上当前所有手指的列表。TargetTouches:位于当前DOM元素上的手指列表。每个触摸点包含以下触摸信息(常用):标识符:唯一标识触摸会话中当前手指的数值。通常,它是从0开始的序列号target:DOM元素,这是操作的目标。pageX/pageX/clientX/clientY/screenX/screenY:一个数值,即屏幕上发生动作的位置。
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);
 
 
 

免责声明:文章转载自《手机端html5触屏事件(touch事件)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别【转】关于ASP.NET中独立页面设置身份认证等问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaScript之屏幕上下左右滑动监听

前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上、下、左、右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面。 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监听失效等bug,变更了判断滑动必须大于30像素的长距离为大于0像素的短距离。 使用了JS的几项底层事件API: event的事件类型 touchstart...

vue的学习总结---事件处理

v-on的理解 监听DOM元素的事件,并在触发时执行一些js代码 <template> <div> <!-- v-on监听DOM事件,并在触发时做一些js的操作,如下代码可以将js操作直接放在事件中 --> <button v-on:click="num++">点击按钮+1</but...

火狐和IE的window.event对象详解

FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的。但它主要检查FF方面的错误,对IE就无能为力了。要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测试了),用法也很方便。   至于JS对不同浏览器的兼容注意事项,的确很多,下面给你的也只是部分,一般建议还是采用jquery,prototype等一些已经处理...

adb shell按键操作(input keyevent)

前言:input keyeven操作发送手机上常用的一些按键操作 一、keyevent事件对应数字 电话键 KEYCODE_CALL: 拨号键 KEYCODE_ENDCALL: 挂机键 KEYCODE_HOME: 按键Home KEYCODE_MENU: 菜单键 KEYCODE_BACK: 返回键 KEYCODE_SEARCH: 搜索键 KEYCODE_...

Python学习之路:红绿灯例子

importtime,threading event =threading.Event() deflighter(): count =0 event.set() whileTrue: if count > 5 and count < 10:#改成红灯 event.clear()...

js键盘相关知识总结

一、相应事件 keydown:按下键盘上的任意键都可触发,按着不放则重复触发 keypress:按下键盘上的字符键时触发,按着不放则重复触发 keyup:释放按键时触发 事件顺序:keydown>keypress>keypup 在文本框中捕获按键事件需要注意的地方: 1.keydown、keypress是在文本框内容变化前发生,keyup则是在...