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 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>