zoukankan      html  css  js  c++  java
  • 手机端html5触屏事件(touch事件)【转】

    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:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。

     

     1  var obj = document.getElementByIdx_x('id');
     2 obj.addEventListener('touchmove', function(event) {
     3      // 如果这个元素的位置内只有一个手指的话
     4     if (event.targetTouches.length == 1) {
     5      event.preventDefault();// 阻止浏览器默认事件,重要 
     6         var touch = event.targetTouches[0];
     7         // 把元素放在手指所在的位置
     8         obj.style.left = touch.pageX-50 + 'px';
     9         obj.style.top = touch.pageY-50 + 'px';
    10         }
    11 }, false);

     

    注意:此功能只能在移动设备或模拟移动设备查看效果

    原文来自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html

     

     

     

     

  • 相关阅读:
    springboot 整合 pagehelper
    Linux maven安装
    linux 查看端口状态
    mysql执行顺序
    Java int/int 保留2位小数
    【每日一题】30.储物点的距离 (区间处理,前缀和/线段树//树状数组)
    【每日一题】29.maze (BFS 进阶)
    2016年第七届 蓝桥杯C组 C/C++决赛题解
    2016年第七届 蓝桥杯A组 C/C++决赛题解
    第六届蓝桥杯C++A组 A~F题题解
  • 原文地址:https://www.cnblogs.com/zqt14520/p/5370959.html
Copyright © 2011-2022 走看看