zepto-touch事件 

  1 <!doctype html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8         <!--
  9             viewport 布局视口
 10             html的大小是布局视口大小
 11             真正可看见的大小是度量视口
 12             
 13             设备大小 布局视口 度量视口 ----- 保持一致
 14             
 15             width=device-width ----- 让布局视口的大小跟设备大小一致
 16             initial-scale=1 ------ initial-scale=布局视口/度量视口 =1   布局视口跟度量视口大小一致
 17             
 18             minimum-scale=1  maximum-scale=1  ----- 不能双击缩放
 19             user-scalable=no   -----   不能双指捏合
 20             
 21             虽然在标签已经将viewport设置为不能通过双击缩放，但是移动依然会接收这个事件
 22             移动端的处理接收这个事件的方式：
 23             在一次点击之后，等待300ms，如在这个时间之内，发生了第二次的点击，就是双击事件。
 24             
 25             //解决300ms延迟的问题，移动端提供了touch事件
 26             
 27             //移动端click事件，通常叫做tap事件
 28             zetpo提供了tap事件，   mui框架，vue框架，angular框架，react框架，都解决了tap事件。
 29             
 30             
 31         -->
 32         
 33         <style>
 34             #box{
 35                 width: 200px;
 36                 height: 200px;
 37                 background: red;
 38             }
 39             
 40             
 41         </style>
 42     
 43     </head>
 44 
 45     <body>
 46         
 47         <!--<div id="box" onclick="boxAction()"></div>-->
 48         <div id="box"></div>
 49         
 50         <script>
 51             
 52 //            function boxAction(){
 53 //                console.log(111111111)
 54 //            }
 55 
 56             var box = document.querySelector('#box');
 57             
 58             //添加事件监听
 59             //touch有四个部分
 60             //触摸开始
 61             box.addEventListener('touchstart', function(ev){
 62                 console.log('touchstart');
 63                 
 64                 console.log(ev);
 65                 //ev.type: 事件名字
 66                 //ev.target: 触发对象
 67                 //ev.touches: 数组，触摸对象  一个的触摸点就是一个对象
 68                 
 69                 //touch对象
 70                 //timeStamp 时间戳
 71                 //clientX
 72                 //clientY
 73                 
 74                 //当touchend事件触发时，touches和targetTouches都没有值
 75                 //如果要知道停止的点在哪个位置，取changedTouches的值
 76                 
 77                 //changedTouches 触摸的上一个点
 78                 
 79                 //事件类型   事件touch对象时间戳   clientX clientY
 80                 //封装移动端的click事件 ，  通过都叫做tap事件 
 81                 //    在touchStart时记录时间记录位置
 82                 //    如果手指移动了，触发了touchmove，并且滑动的范围大，就不能触发了click事件了
 83                 //    再在touchend判断时间，位置。才能触发click事件
 84                 
 85                 //长按事件     滑动事件     捏合事件
 86                 
 87             })
 88             
 89             //触摸移动，手指在该标签对象上开始触摸，之后再移动就会触发
 90             box.addEventListener('touchmove', function(ev){
 91                 console.log('touchmove');
 92                 console.log(ev)
 93             })
 94             
 95             //触摸开始之后，手指离开屏幕
 96             box.addEventListener('touchend', function(ev){
 97                 console.log('touchend');
 98                 console.log(ev)
 99             })
100             
101             //触摸是被动取消的，就会触发该事件
102             //来电，来短信，来通知，锁屏，退出活跃状态。。。。
103             box.addEventListener('touchcancel', function(){
104                 console.log('touchcancel');
105             })
106             
107             
108             
109             
110         </script>
111         
112     </body>
113 
114 </html>

 

posted @ 2017-09-14 17:48  铜镜123  阅读(136)  评论(0)    收藏  举报