html5触摸touch事件及代码介绍

Admin 2021-04-14 群英技术资讯 756 次浏览

       这篇文章主要介绍HTML5中的触摸touch事件,对于触摸事件大家应该都很容易理解,例如我们手指触摸智能手机屏幕时开始触发事件,手机滑动屏幕时触发事件,手指离开屏幕触发结束,这就是一个大致的过程,那么HTML5触摸事件时如何来实现的呢?下面我们来具体了解一下。

       今天为大家介绍的事件主要是触摸事件:

       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事件的介绍,实现的示例代码如上文所示,希望对大家学习HTML有帮助。

群英智防CDN,智能加速解决方案
标签: html5事件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服