zepto-touch事件

時間 2019-11-30
標籤 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。