移动端事件基础

最新推荐文章于 2023-12-07 10:27:19 发布

cssshua

最新推荐文章于 2023-12-07 10:27:19 发布

阅读量533

点赞数

分类专栏：移动端文章标签： JavaScript 移动端移动端事件

本文链接：https://blog.csdn.net/cssshua/article/details/77991143

版权

移动端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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 = 右滑，反之左滑

cssshua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端事件基础

PC端的基本事件：鼠标事件：click mouseover mouseout mouseenter浏览器能够阻止其默认的冒泡机制 mouseleavemousemove mousedown mouseup mousewheel滚轮事件 load scroll blur focus change键盘事件： keydown
复制链接

扫一扫

专栏目录