1、移动端基础事件

  • touchstart - 手指触摸

  • touchmove - 手指移动

  • touchend - 手指离开

2、事件监听

  • addEventListener
  1.     addEventListener("事件名",函数,冒泡或捕获);
  2.         // 用这个的好处：
  3.             // (1)不会存在前后覆盖的问题
  4.             // (2)在Chrome浏览器下可以一直识别
  5.         // 冒泡和捕获的区别：
  6.             // (1)冒泡 - 点击元素 他会把这个事件一直向上传递 从下向上传递
  7.             // (2)捕获 - 从上向下传递

3、Event对象

  • 事件函数中默认的第一个参数,是event对象

4、阻止页面上的文字被选中和系统菜单

  1.     document.addEventListener("touchstart",(e) => {
  2.         e.preventDefault(); // -> 阻止默认事件
  3.         // -> 这个可以解决以下的问题：
  4.         // (1)阻止页面上的文字被选中    -- 可以通过阻止冒泡e.stopPropagation();使某个元素上的文字被选中
  5.         // (2) 阻止页面上的系统菜单
  6.         // -> 但是使用这种方法可能存在一种弊端
  7.         // 页面上的所有滚动条失效 
  8.         // (3)阻止页面的橡皮筋效果的回弹
  9.         // -> 可以通过阻止touchstart或者touchmove来清除系统默认的回弹效果,唯一不好处是滚动条失效
  10.     });

5、事件点透问题

  1.     /*
  2.         PC端鼠标事件 在移动端也可以正常使用，但是注意 事件的执行 会有300ms的延迟,目前的浏览器已经很快了,基本不存在300ms延迟了
  4.         事件点透：
  5.             - 在移动端 PC事件 有 300ms的延迟 【目前大部分浏览器已解决】
  7.         解决办法：
  8.             - 阻止默认事件   (部分安卓机型不支持)
  9.             - 不在移动端使用鼠标事件，不用a标签做页面跳转
  10.     */ 
  11.     window.onload = function () {
  12.         var oDiv = document.querySelector('#div');
  13.         oDiv.addEventListener("touchend",function (e) {
  14.             e.preventDefault();
  15.             this.style.display = "none";
  16.         });
  17.     }

6、防止误触

  1.     document.addEventListener(
  2.         "touchstart",
  3.         function (e) {
  4.             e.preventDefault();
  5.         }
  6.     );
  7.     window.onload = function () {
  8.         var a = document.querySelectorAll('a');
  9.         for (var i = 0; i < a.length; i++) {
  10.             a[i].addEventListener("touchmove", () => {
  11.                 // -> 给其一个自定义属性isMove,表示是否移动过,默认是true
  12.                 this.isMove = true;
  13.             });
  14.             a[i].addEventListener("touchend", () => {
  15.                 // -> 判断一下isMove属性如果没有被触碰过,则跳转
  16.                 if (!this.isMove) {
  17.                     window.location.href = this.href;
  18.                 }
  19.                 this.isMove = false;
  20.             });
  21.         }
  22.     }

7、touchEvent

  1.     window.onload = function () {
  2.         var oBox = document.querySelector('#box');
  3.         oBox.addEventListener("touchmove", function (e) {
  4.             console.log(e.touches);// -> 当前屏幕上的手指列表
  5.             console.log(e.targetTouches);// -> 当前元素上的手指列表
  6.             console.log(e.changedTouches);// -> 触发当前事件的手指列表
  7.             var touch = e.changedTouches[0];
  8.             this.innerHTML = touch.pageX + "|" + touch.pageY;
  9.         });
  10.     }

8、滑屏原理分析

  1.     <!-- 
  2.         1、手指按下,记录一下手指的坐标
  3.         2、移动的时候同样记录下手指的坐标
  4.         3、计算手指移动的距离 = 移动后的坐标 - 移动前的坐标
  5.         ——————————————————
  6.         4、手指按下,记录一下元素的位置
  7.         5、计算元素现在所在的位置 = 移动后手指移动的距离 + 元素的初始位置
  8.     -->
  9.     <div id="wrap">
  10.         <div id="scroll">
  11.             <p>111111111111111111111111111111</p><br/>
  12.             <p>111111111111111111111111111111</p><br/>
  13.             <p>111111111111111111111111111111</p><br/>
  14.             <p>111111111111111111111111111111</p><br/>
  15.             <p>111111111111111111111111111111</p><br/>
  16.             <p>111111111111111111111111111111</p><br/>
  17.             <p>111111111111111111111111111111</p><br/>
  18.             <p>111111111111111111111111111111</p><br/>
  19.             <p>111111111111111111111111111111</p><br/>
  20.             <p>111111111111111111111111111111</p><br/>
  21.             <p>111111111111111111111111111111</p><br/>
  22.             <p>111111111111111111111111111111</p><br/>
  23.             <p>111111111111111111111111111111</p><br/>
  24.             <p>111111111111111111111111111111</p><br/>
  25.         </div>
  26.     </div>
  1.     html{height: 100%;}
  2.     body{margin: 0;height: 100%;position: relative;overflow:hidden;}
  3.     #wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
  4.     #scroll{position: absolute;top: 0;left: 0;width: 100%;}
    window.onload = function () {
        var oWrap = document.querySelector('#wrap'),
            oScroll = document.querySelector('#scroll');
        var startPoint = 0;// -> 按下的坐标信息
        var startEl = 0;// -> 按下的元素位置
        var maxTop = oWrap.clientHeight - oScroll.offsetHeight; // -> 最大高度
        oWrap.addEventListener("touchstart",function (e) {
            var touch = e.changedTouches[0];
            startPoint = touch.pageY;
            startEl = oScroll.offsetTop;
        })
        oWrap.addEventListener("touchmove",function (e) {
            var touch = e.changedTouches[0];
            var nowPoint = touch.pageY;
            var dis = nowPoint - startPoint;// -> 手指移动后的距离
            var Top = startEl + dis;// -> 元素现在所要在的位置
            if (Top > 0) {
                Top = 0;
            }
            if (Top < maxTop) {
                Top = maxTop;
            }
            oScroll.style.top = Top + "px";
        })
    }