1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>Title</title> 8 <style> 9 .box{ 10 width: 500px; 11 height: 500px; 12 border: 1px solid #ccc; 13 position: relative; 14 } 15 .click { 16 width: 300px; 17 height: 300px; 18 background-color: blue; 19 } 20 .tap{ 21 width: 200px; 22 height: 200px; 23 background-color: red; 24 position: absolute; 25 left: 0; 26 top:0; 27 } 28 </style> 29 </head> 30 <body> 31 <!-- 32 touch:只能在移動端響應 33 click:延遲 34 --> 35 36 <!--移動端的點透： 37 前提： 38 1.必須為上面的元素添加touch相關事件，並且讓其消失 39 2.下面的元素必須能夠響應延遲的click事件--> 40 <div class="box"> 41 <div class="click"></div> 42 <div class="tap"></div> 43 </div> 44 <!--<script src="./js/common.js"></script>--> 45 <!--下面這個文件包含了touch事件--> 46 <script src="./js/zepto.min.js"></script> 47 <script src="./js/fastclick.js"></script> 48 <script> 49 /*var tap = document.querySelector(".tap");*/ 50 var tap = $(".tap"); 51 var click = document.querySelector(".click"); 52 53 /*tap.addEventListener("touchstart",function(){ 54 tap.style.visibility = "hidden"; 55 })*/ 56 /* click.addEventListener("click",function(){ 57 console.log(123); 58 })*/ 59 60 /* /!*使用自己封裝好的Tap事件*!/ 61 heima.tap(tap,function(e){ 62 tap.style.visibility = "hidden" 63 });*/ 64 65 /*zepto在努力的解決點透的問題，但是沒有完全解決，所以還是會出現點透的現象*/ 66 /*tap.on("tap",function(e){ 67 tap[0].style.visibility = "hidden" 68 }); 69 click.addEventListener("click",function(){ 70 console.log(123); 71 })*/ 72 73 /*fastclick:實現pc和移動端的單擊事件的兼容，意味着使用fastclick來綁定事件，可以做到pc和移動都能響應 74 * 況且它解決了： 75 * 1.解決了touch事件在pc端無法響應的問題 76 * 2.解決了click事件在移動端延遲的問題 77 * 3.沒有點透*/ 78 79 /*dom方式：*/ 80 if ('addEventListener' in document) { 81 document.addEventListener('DOMContentLoaded', function() { 82 /*如果對body綁定，那么意味着body下面的所有元素都會使用fastclick來進行單擊事件的處理*/ 83 FastClick.attach(document.body); 84 }, false); 85 } 86 87 88 tap[0].addEventListener("click",function(){ 89 tap[0].style.visibility = "hidden" 90 }) 91 click.addEventListener("click",function(){ 92 console.log(123); 93 }) 94 </script> 95 </body> 96 </html>