移動端優化
阿新 • • 發佈：2017-09-23
height spa 移動端 oct code start name init style
地址：http://www.imooc.com/video/9578
一、300ms
移動web頁面上的click事件響應都要慢上300ms
解決辦法：
第一種，使用Tap事件代替click事件
例子:
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 .btn{ 9 width: 150px; 10 height: 60px; 11 line-height: 60px; 12 13 background-color: #EA424F; 14 color: #fff; 15 font-size: 20px; 16 text-align: center; 17 display: inline-block; 18 margin-bottom: 10px; 19 } 20 .bg-green{ 21 background-color: #78C576; 22 } 23 24 .show_time_click{ 25 display: inline-block; 26 font-size: 25px; 27 margin-left: 10px; 28 } 29 30 </style> 31 </head> 32 <body> 33 <p>註意：該Demo在移動設備上才能看出差別</p>34 <div class="line"> 35 <div class="btn" id="clickBtn">click me</div> 36 <div class="show_time_click" id="clickTime">0</div> 37 </div> 38 39 <div class="line"> 40 <div class="btn bg-green" id="tapBtn">tap me</div> 41 <div class="show_time_click" id="tapTime">0</div> 42 </div> 43 44 <script src="../js/zepto.js"></script> 45 <script type="text/javascript"> 46 47 var clickBtn = document.querySelector(‘#clickBtn‘), 48 tapBtn = document.querySelector(‘#tapBtn‘), 49 clickTime = document.querySelector(‘#clickTime‘), 50 tapTime = document.querySelector(‘#tapTime‘); 51 52 var start = 0,end = 0; 53 clickBtn.addEventListener(‘touchstart‘,function(){ 54 start = new Date(); 55 }); 56 tapBtn.addEventListener(‘touchstart‘,function(){ 57 start = new Date(); 58 }); 59 60 clickBtn.addEventListener(‘click‘,function(){ 61 end = new Date(); 62 clickTime.innerHTML = (end-start)+‘ms‘; 63 }); 64 $(‘#tapBtn‘).on(‘tap‘,function(){ 65 end = new Date(); 66 tapTime.innerHTML = (end-start)+‘ms‘; 67 }) 68 </script> 69 70 </body> 71 </html>
Tap事件的問題，“點透”BUG
1 fastclick.attach(document.body)
移動端優化