• 移动端Touch事件


    案例1:

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
     6 <title>Test Tap</title>
     7 <style>
     8     .touchpad{
     9         width: 100%;
    10         height: 200px;
    11         font-size: 40px;
    12         text-align: center;
    13         line-height: 200px;
    14         background: rgba(0,0,0,0.5);
    15         position: relative;
    16         color: #ddd;
    17     }
    18 
    19     .ball{
    20         display: none;
    21         position: absolute;
    22         width: 25px;
    23         height: 25px;
    24         border-radius: 15px;
    25         background-color: #7AE6FF;
    26         top: 0;
    27         left: 0;
    28     }
    29     p{
    30         height: 30px;
    31     }
    32 
    33 </style>
    34 </head>
    35 <body>
    36 
    37 <p id="desc"></p>
    38 <div id="touchPad" class="touchpad">触摸板</div>
    39 <div id="ball" class="ball"></div>
    40 
    41 <script src="../js/zepto.js"></script>
    42 <script type="text/javascript">
    43     var touchpad = document.querySelector('#touchPad'),
    44         ball = document.querySelector('#ball'),
    45         desc = document.querySelector('#desc');
    46 
    47     //简单的touch事件(废弃)
    48     var touchHandler = function(e){
    49         var type = e.type;
    50 
    51 
    52         //注意touchend的touches和targetTouches为空,只偶有changeTouches获取上次一的touchTlist
    53         if(type != 'touchend'){
    54             var pos = {
    55                 x : e.touches[0].clientX,
    56                 y : e.touches[0].clientY
    57             }
    58 
    59             ball.style.left = pos.x + 'px';
    60             ball.style.top = pos.y + 'px';
    61             desc.innerHTML = e.type + '(clienX:'+pos.x+', clientY:'+ pos.y+')';
    62         }else{
    63             desc.innerHTML = e.type ;
    64         }
    65         
    66         switch(type){
    67             case 'touchstart':
    68                 ball.style.display = 'block'; 
    69                 break;
    70             case 'touchmove': 
    71                 //android的4.4,4.0的bug:只触发touchstart,和一次的touchmove,touchend不触发
    72                 //加入evnt.preventDefault
    73                 event.preventDefault();
    74                 break;
    75             case 'touchend': 
    76                 ball.style.display = 'none';
    77                 break;
    78         }
    79     }
    80 
    81     touchpad.addEventListener('touchstart',touchHandler);
    82     touchpad.addEventListener('touchmove', touchHandler);
    83     touchpad.addEventListener('touchend', touchHandler);
    84 
    85 
    86 </script>
    87 
    88 </body>
    89 </html>

    案例2:

      1 <!doctype html>
      2 <html lang="en">
      3 <head>
      4 <meta charset="UTF-8">
      5 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      6 <title>Test Tap</title>
      7 <style>
      8     .touchpad{
      9         width: 100%;
     10         height: 200px;
     11         font-size: 40px;
     12         text-align: center;
     13         line-height: 200px;
     14         background: rgba(0,0,0,0.5);
     15         position: relative;
     16         color: #ddd;
     17     }
     18 
     19     .ball{
     20         display: none;
     21         position: absolute;
     22         width: 25px;
     23         height: 25px;
     24         border-radius: 15px;
     25         background-color: #7AE6FF;
     26         top: 0;
     27         left: 0;
     28     }
     29     p{
     30         height: 30px;
     31     }
     32 
     33 </style>
     34 </head>
     35 <body>
     36 
     37 <p id="desc"></p>
     38 <div id="touchPad" class="touchpad">触摸板</div>
     39 <div id="ball" class="ball"></div>
     40 
     41 <script src="../js/zepto.js"></script>
     42 <script type="text/javascript">
     43     var touchpad = document.querySelector('#touchPad'),
     44         ball = document.querySelector('#ball'),
     45         desc = document.querySelector('#desc');
     46 
     47 
     48     //获取touch的点(兼容mouse事件)
     49     var getTouchPos = function(e){
     50         var touches = e.touches;
     51         if(touches && touches[0]) {
     52             return { x : touches[0].clientX ,
     53                      y : touches[0].clientY };
     54         }
     55         return { x : e.clientX , y: e.clientY };
     56     }
     57 
     58     //计算两点之间距离
     59     var getDist = function(p1 , p2){
     60         if(!p1 || !p2) return 0;
     61         return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
     62     }
     63     //计算两点之间所成角度
     64     var getAngle = function(p1 , p2){
     65         var r = Math.atan2(p2.y - p1.y, p2.x - p1.x);
     66         var a = r * 180 / Math.PI;
     67         return a;
     68     };
     69      //获取swipe的方向
     70     var getSwipeDirection = function(p2,p1){
     71         var dx = p2.x - p1.x;
     72         var dy = -p2.y + p1.y;    
     73         var angle = Math.atan2(dy , dx) * 180 / Math.PI;
     74 
     75         if(angle < 45 && angle > -45) return "right";
     76         if(angle >= 45 && angle < 135) return "top";
     77         if(angle >= 135 || angle < -135) return "left";
     78         if(angle >= -135 && angle <= -45) return "bottom";
     79 
     80     }
     81 
     82 
     83     var startEvtHandler = function(e){
     84         var pos = getTouchPos(e);
     85         ball.style.left = pos.x + 'px';
     86         ball.style.top = pos.y + 'px';
     87         ball.style.display = 'block';
     88 
     89         var touches = e.touches; 
     90         if( !touches || touches.length == 1 ){ //touches为空,代表鼠标点击
     91             point_start = getTouchPos(e);
     92             time_start = Date.now();
     93         }
     94     }
     95 
     96     var moveEvtHandler = function(e){
     97         var pos = getTouchPos(e);
     98         ball.style.left = pos.x + 'px';
     99         ball.style.top = pos.y + 'px';
    100 
    101 
    102         point_end = getTouchPos(e);
    103         e.preventDefault();
    104     }
    105 
    106     //touchend的touches和targetTouches没有对象,只有changeTouches才有
    107     var endEvtHandler = function(e){
    108         ball.style.display = 'none';
    109 
    110         var time_end = Date.now();
    111 
    112         //距离和时间都符合
    113         if(getDist(point_start,point_end) > SWIPE_DISTANCE && time_start- time_end < SWIPE_TIME){
    114            
    115            var dir = getSwipeDirection(point_end,point_start);
    116            touchPad.innerHTML = 'swipe'+dir;
    117         }
    118     }
    119 
    120    
    121     var SWIPE_DISTANCE = 30;  //移动30px之后才认为swipe事件
    122     var SWIPE_TIME = 500;     //swipe最大经历时间
    123     var point_start,
    124         point_end,
    125         time_start,
    126         time_end;
    127 
    128     //判断是PC或者移动设备
    129     var startEvt, moveEvt, endEvt;
    130     if("ontouchstart" in window){
    131         startEvt="touchstart";
    132         moveEvt="touchmove";
    133         endEvt="touchend";
    134     }else{
    135         startEvt="mousedown";
    136         moveEvt="mousemove";
    137         endEvt="mouseup";            
    138     }
    139 
    140     touchpad.addEventListener(startEvt, startEvtHandler);
    141     touchpad.addEventListener(moveEvt, moveEvtHandler);
    142     touchpad.addEventListener(endEvt, endEvtHandler);
    143 
    144 
    145 
    146 </script>
    147 
    148 </body>
    149 </html>

     

     

  • 相关阅读:
    大快DKhadoop开发环境安装常见问题与解决方案
    大快搜索:做大数据底层技术的领跑者
    大快搜索工业大数据管理平台深度解析
    大快DKH大数据智能分析平台监控参数说明
    大快hadoop安装包下载与平台监控参数说明
    重磅|大快搜索上榜2018中国大数据公司50强 斩获多项大奖成最大黑马
    [岁月随想]感恩节前夕
    [听点音乐]American Music Awards 2015 Winners
    [IT学习]sql 入门及实例
    [英语学习]免费学习英语的好地方
  • 原文地址:https://www.cnblogs.com/zhaobao1830/p/7581836.html
Copyright © 2020-2023  润新知