zepto-touch事件

 <!doctype html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <!--

             viewport 布局视口

             html的大小是布局视口大小

             真正可看见的大小是度量视口

             设备大小 布局视口 度量视口 ----- 保持一致

             width=device-width ----- 让布局视口的大小跟设备大小一致

             initial-scale=1 ------ initial-scale=布局视口/度量视口 =1   布局视口跟度量视口大小一致

             minimum-scale=1  maximum-scale=1  ----- 不能双击缩放

             user-scalable=no   -----   不能双指捏合

             虽然在标签已经将viewport设置为不能通过双击缩放，但是移动依然会接收这个事件

             移动端的处理接收这个事件的方式：

             在一次点击之后，等待300ms，如在这个时间之内，发生了第二次的点击，就是双击事件。

             //解决300ms延迟的问题，移动端提供了touch事件

             //移动端click事件，通常叫做tap事件

             zetpo提供了tap事件，   mui框架，vue框架，angular框架，react框架，都解决了tap事件。

         -->

         <style>

             #box{

                 width: 200px;

                 height: 200px;

                 background: red;

             }

         </style>

     </head>

     <body>

         <!--<div id="box" onclick="boxAction()"></div>-->

         <div id="box"></div>

         <script>

 //            function boxAction(){

 //                console.log(111111111)

 //            }

             var box = document.querySelector('#box');

             //添加事件监听

             //touch有四个部分

             //触摸开始

             box.addEventListener('touchstart', function(ev){

                 console.log('touchstart');

                 console.log(ev);

                 //ev.type: 事件名字

                 //ev.target: 触发对象

                 //ev.touches: 数组，触摸对象  一个的触摸点就是一个对象

                 //touch对象

                 //timeStamp 时间戳

                 //clientX

                 //clientY

                 //当touchend事件触发时，touches和targetTouches都没有值

                 //如果要知道停止的点在哪个位置，取changedTouches的值

                 //changedTouches 触摸的上一个点

                 //事件类型   事件touch对象时间戳   clientX clientY

                 //封装移动端的click事件 ，  通过都叫做tap事件

                 //    在touchStart时记录时间记录位置

                 //    如果手指移动了，触发了touchmove，并且滑动的范围大，就不能触发了click事件了

                 //    再在touchend判断时间，位置。才能触发click事件

                 //长按事件     滑动事件     捏合事件

             })

             //触摸移动，手指在该标签对象上开始触摸，之后再移动就会触发

             box.addEventListener('touchmove', function(ev){

                 console.log('touchmove');

                 console.log(ev)

             })

             //触摸开始之后，手指离开屏幕

             box.addEventListener('touchend', function(ev){

                 console.log('touchend');

                 console.log(ev)

             })

             //触摸是被动取消的，就会触发该事件

             //来电，来短信，来通知，锁屏，退出活跃状态。。。。

             box.addEventListener('touchcancel', function(){

                 console.log('touchcancel');

             })

         </script>

     </body>

 </html>
巴特西

zepto-touch事件

最新文章

热门文章
