移动端事件基础

最新推荐文章于 2023-12-19 11:23:41 发布

原创最新推荐文章于 2023-12-19 11:23:41 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #移动端 #移动端事件

移动端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了移动端点击事件的工作原理及如何解决300ms延迟问题，包括使用touch事件模型模拟click事件的方法，并介绍了一个快速解决方案——fastClick.js。

PC端的基本事件：

鼠标事件：click mouseover mouseout mouseenter浏览器能够阻止其默认的冒泡机制 mouseleave

mousemove mousedown mouseup mousewheel滚轮事件 load scroll blur focus change

键盘事件： keydown keyup

移动端的基本事件：

click load scroll blur focus change input（代替keydown keyup）..... touch事件模型（处理单手指操作） gesture（处理多手指操作）

移动端要操作的行为很多（长按双击放大缩小旋转摇一摇重力感应），但是移动端并没有给我们提供这个操作的事件类型，要我们自己来处理这些事件，一般用touch和cesture事件模型组合实现

touch事件模型：touchstart（手指摁下的时候） touchmove（手指在屏幕上滑动） touchend（手指离开屏幕的时候） touchcancle（出现异常情况，一般不用）移动端标准事件

gesture事件模型：gesturestart gestureend gesturechange

click：

在移动端click属于单击事件，不是点击事件，在移动端的项目中，我们经常会区分单击做什么，双击做什么，所以移动端的浏览器再识别click的时候，只有确定是单击后才会把它执行。

在移动端使用click会存在300ms的延迟，浏览器会在第一次点击结束后，还需要等到300ms看是否触发了第二次点击，如果触发了第二次点击就不属于click了，没有触发第二次点击才属于click

//    移动端使用click方法会存在300ms的延迟
    var oBox = document.querySelector('.box');
    oBox.addEventListener('click',function () {
        this.style.webkitTransform = 'rotate(360deg)';
    },false);

如果想解决300ms的延迟问题，就使用touchstart touchmove touchend自己进行模拟就可以了

首先console.log查看一下ev里面包含了什么东西

ev：TouchEvent => 里面有我们熟悉的type，preventDefault(returnValue)，stopPropagation(cancelBubble)，changedTouches，touches

其中，changedTouches和touches都是手指信息的集合（TouchList），touch获取到的值得必备条件只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取离开的瞬间坐标，只能使用changedTouches获取

在移动端使用touch模型，则不会直接得到clientX，需要用ev.touch[0].clientX来获取

<script type="text/javascript">
    //解决300ms延迟问题方法1，使用touch模型实现点击操作（单击&&双击）
    var oBox = document.querySelector('.box');
    function on(curEle, type, fn) {
        curEle.addEventListener(type, fn);
    }
    on(oBox, 'touchstart', function (ev) {
        var point = ev.touches[0];
        this['staX'] = point.clientX;
        this['staY'] = point.clientY;
        this['isMove'] = false;
    });
    on(oBox, 'touchmove', function (ev) {
        var point = ev.touches[0];
        var newX = point.clientX,
            newY = point.clientY;
//        判断是否发生滑动，我们需要判断偏移的值是否在30px之内
        if (Math.abs(newX - this['staX']) > 30 || Math.abs(newY - this['staY']) > 30) {
            this['isMove'] = true;
        }
    });
    on(oBox, 'touchend', function (ev) {
        //点击，实现可以连续的点击旋转原理：定义一个定时器，当用1s时间旋转到360°的时候，
        // 立刻让盒子的位置变为0°，由于有1s的动画效果，点击之后就会1s实现一次动画无限自动旋转
        // 所以需要在定时器中让0°时候，也让动画的持续时间变为0，当再次点击的时候持续时间变为1
        if (this['isMove'] === false) {
            this.style.transitionDuration = '1s';
            this.style.webkitTransform = 'rotate(360deg)';
            window.setTimeout(function () {
                this.style.transitionDuration = '0s';
                this.style.webkitTransform = 'rotate(0deg)';
            }.bind(this),1000);
        } else {//滑动
            this.style.background = 'red';
        }
    });
</script>

上面的方式就可以解决300ms的延迟问题，但可见，步骤是比较繁琐的，所以我们可以直接引入fastClick.js文件，更好更快捷的解决300ms延迟问题

<script type="text/javascript" src="js/fastClick.js"></script>

<script type="text/javascript">
    //解决300ms延迟问题,使用fastClick.js文件
    FastClick.attach(document.body);
    //    移动端使用click方法会存在300ms的延迟
    var oBox = document.querySelector('.box');
    oBox.addEventListener('click', function () {
        this.style.transitionDuration = '1s';
        this.style.webkitTransform = 'rotate(360deg)';
        window.setTimeout(function () {
            this.style.transitionDuration = '0s';
            this.style.webkitTransform = 'rotate(0deg)';
        }.bind(this),1000);
    }, false);
</script>

页面的HTML和CSS

<div class="box"></div>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>移动端事件click</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #eee;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: lightblue;
            -webkit-transition: all 1s linear 0s;
            transition: all 1s linear 0s;
        }
    </style>
</head>

总结：

点击，单击，双击，长按，滑动，左滑，右滑，上滑。下滑....

单击和双击，相差300ms

点击和长按，相差750ms

点击和滑动，X/Y轴偏移的距离是否在30px之内，超过就是滑动

左右滑动和上下滑动，X轴偏移的距离 > Y轴偏移的距离 = 左右滑反之，上下滑

左滑和右滑，偏移的距离 > 0 = 右滑，反之左滑