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" οnclick="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>