怎么新建MySQL数据库

发布时间:2021-04-14 作者:admin
阅读:817

       这篇文章主要介绍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有帮助。

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

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145