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>
