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 500px; 11 height: 500px; 12 border: 1px solid #ccc; 13 position: relative; 14 } 15 .click { 16 300px; 17 height: 300px; 18 background-color: blue; 19 } 20 .tap{ 21 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>