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>
