移动端.md

1. 如何在手机上测试移动端项目

   • 核心：在本地开一个服务器，手机连接这个服务器进行测试

   • 手机和电脑连接同一个网络

   • 在item中 输入 anywhere 8860 会弹出一个开发项目的浏览器

   • 然后再手机端查看浏览器的地址，或者直接扫码 打开

2. 移动端的3大事件

   • ontouchstart 按下
   • ontouchmove 移动
   • ontouchend 抬起
   • 注意点：
     • 在浏览器中调试的时候有可能on的方式不生效，但是真机上又能显示。
     • 使用事件绑定的方式去写问题就解决了
     • PC上的事件比移动端的事件要慢一些大约在300ms左右
     • 在移动端上面就不要使用pc事件了，统一都用touch事件
   • touchstart 、touchmove、touchend是一组事件,如果在一个元素上触发了touchstart，那么只要不touchend,那么事件都作用在这个元素上,也就是说：不用像pc端一样，事件套事件

3. 移动端的穿透事件

   • 穿透的出现：在点击上层元素的时候，如果下层元素为焦点元素（a,input），并且尝试让上层元素消失或者飘逸，那么这个时候就触发下层元素的焦点。

   • 原因：还是因为那300ms，第一次点击会记录点击的位置，方便第2次点击的时候去判断是否在规定时间内双击

   • 解决方法：

     • 下层元素不使用焦点元素,但是 a 是可以让爬虫捕捉数据的不利于搜索引擎抓取关键信息

     • 开个定时器，让其300ms以后再消失（“飘逸”），但是用户体验不佳，用户能够明显感觉得到延迟。

     • 先把阻止焦点行为（更推荐使用这种解决方案），在点击焦点元素的时候用js去跳转页面。

       document.addEventListener('touchend',function(ev){
         ev.preventDefault();
       });
       
       a.addEventListener('touchend',function(ev){
               window.location.href = this.href;
           });

4. 如何 阻止缩放，橡皮筋效果，默认的选中框等默认行为

   document.addEventListener('touchstart',function(ev){
     ev.preventDefault();
   });

5. 如何在阻止默认行为后，还能使input框正常使用

   txt.addEventListener('touchstart',function(ev){
     ev.stopPropagation();
   });

6. 事件对象

   • changedTouches：在元素身上同时出现的手指数
   • targetTouches：只能在元素身上出现当前元素中手指个数，可以是同时出现也可以依次增加，注意：如果减少手指数，那么获取不到最新的手指个数，按最大的统计
   • touches：会在绑定元素上触发事件，触发时的手指数是屏幕上手指的总和（我的手机最多就5个，个数跟手机有关系）
   • 具体使用：误操作的时候
   • 误操作：当想点击第二个按钮时，不小心点到第一个按钮，此时手指并没有抬起，而是移动到第二个按钮，此时还会触发第一个按钮，如何解决当这种误操作时，不让页面发生任何事件

   css:
   .active{
       background: yellow;
   }
   
   html结构：
   
   <button class="active">按钮一</button>
   <button>按钮二</button>
   <button>按钮三</button>
   
   javascript：
   
   let btns = document.querySelectorAll('button');
   let disX = 0;
   let disY = 0;
   document.addEventListener('touchstart',function(ev){
     ev.preventDefault();
   })
   
   for(let i=0;i<btns.length;i++){
     btns[i].addEventListener('touchstart',start);
     btns[i].addEventListener('touchend',end);
   }
   function start(ev){
     disX = ev.targetTouches[0].pageX;
     disY = ev.targetTouches[0].pageY
   }
   function end(ev){
     // alert(1)
     // console.log(ev.changedTouches[0].pageX)
     let  disXend = ev.changedTouches[0].pageX;
     let disYend = ev.changedTouches[0].pageY
     if(Math.abs(disXend - disX) > 50 || Math.abs(disYend - disY) > 50){
       return;
     }
     for(var k=0;k<btns.length;k++){
       btns[k].className = '';
     }
     this.className = 'active';
   }

   ​