移动端

太过爱你忘了你带给我的痛 2022-06-04 07:59 225阅读 0赞

一:移动端基础事件

1.touchstart 手指触摸 == mousedown   
2.touchend 手指抬起 == mouseup  
3.touchmove 手指抬起 == mousmove  
touch事件  在 chrome的模拟器下，部分版本 通过on的方式来添加事件无效  
所以在移动端一般都使用如下方式  
addEventListener("事件名",函数,冒泡或捕获);  
        1. 不会存在前后覆盖问题  
        2. 在chrome的模拟器下可以一直识别

![复制代码][copycode.gif]

//addEventListen可以同时对一个元素添加多个事件
    element.addEventListener(
            "touchstart",
            function() {
                console.log(1);
            }
        );
        element.addEventListener(
            "touchstart",
            function() {
                console.log(2);
            }
        );
        //还可以定义函数,然后直接写函数名
        element.addEventListener(
            "touchstart",
            fn        
        );
        function fn() {
            console.log(3);
        }

![复制代码][copycode.gif]

二:事件冒泡和捕获

addEventListener("事件名",函数,false或true);  
False 冒泡 ：点击元素 他会把这个事件一直向上传递 从下向上传递  
True 捕获 ：从上向下传递  
三:阻止默认事件和阻止冒泡  
e.preventDefault();//阻止默认事件  
e.stopPropagation();//阻止冒泡事件.

![复制代码][copycode.gif]

//阻止系统的默认事件
    document.addEventListener(
        "touchstart",
        function(e) {
            e.preventDefault();
        }
    );
    /*
        e.preventDefault(); 阻止默认事件
        
        阻止掉：document touchstart的默认事件，可以解决一下问题：
            1. 阻止页面上的文字被选中    -- 可以通过阻止冒泡使某个元素上的文字被选中
            2. 阻止页面上的系统菜单
            
        隐患:
            页面上的所有滚动条失效    
            
            
    */

![复制代码][copycode.gif]

三.事件点透

需要大家把这个代码复制到自己编译器上,在谷歌中打开,f12手机端进行调试.

![复制代码][copycode.gif]

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>无标题文档</title>
    <style>
    #div {
        
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: rgba(204,255,0,.5);
    }
    </style>
    <script>
    
    //事件点透,两个元素上的事件都没被触发
    
    
    //阻止浏览器默认事件
    //document.addEventListener(
    //    "touchmove",
    //    function(e) {
        
    //        e.preventDefault();//阻止默认事件
    //    }
    //);
    
    window.onload = function () {
        var div = document.querySelector("#div");
        /*
            PC端鼠标事件 在移动端也可以正常使用，但是注意 事件的执行 会有300ms的延迟
        
            事件点透：
                1. 在移动端 PC事件 有 300ms的延迟
                2. 我们点击了页面之后，浏览器会记录点击下去的坐标
                3. 300ms后，在该坐标找到现在在这的元素 执行事件
            解决办法：
                1. 阻止默认事件    (部分安卓机型不支持)
                2. 不在移动端使用鼠标事件，不用a标签做页面跳转
        */
        div.addEventListener(
            "touchend",
            function (e) {
            //这里不加入阻止默认事件,会发生点透事件,点div但是在百度汉字上,div消失后同时会触发跳转
                //你可以尝试把这个去掉看一下效果
                e.preventDefault();
                this.style.display = "none";
            }
        );
    };
    </script>
    </head>
    <body>
    <a href="http://www.baidu.com">百度</a>
    <div id="div"></div>
    </body>
    </html>

![复制代码][copycode.gif]

四.防止误触事件

原理是:比方你对某刻元素设置了touchend事件,但是有时候我们会手指在这个元素上移动一下,没有想要触发这个事件,所以要进行判断,如果用户是移动则不触发这个事件.

![复制代码][copycode.gif]

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>无标题文档</title>
    <style>
    a {
        
        display: block;
        width: 50px;
        height: 50px;
        background: red;
        color: #fff;
        margin: 20px;
    }
    </style>
    <script>
    document.addEventListener(
        "touchstart",
        function(e) {
            e.preventDefault();
        }
    );
    window.onload = function () {
        var a = document.querySelectorAll("a");
        //对每一个a标签添加touchmove事件,
        for(var i = 0; i < a.length; i++) {
            a[i].addEventListener(
                "touchmove",
                function() {
                    this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
                }
            );
            
            //防止误触原理是,防止移动结束时触发此事件
            
            a[i].addEventListener(
                "touchend",
                function() {
                    //如果是移动就不会走if里边的事件.
                    if(!this.isMove) {
                        window.location.href = this.href;
                    }
                    this.isMove = false;
                }
            );
        }
    };
    </script>
    </head>
    <body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
    </body>
    </html>

![复制代码][copycode.gif]

四:tocuhEvent事件

touches 当前屏幕上的手指列表  
targetTouches 当前元素上的手指列表  
changedTouches 触发当前事件的手指列表

![复制代码][copycode.gif]

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>无标题文档</title>
    <style>
    body {
        
        margin: 0;
    }
    #box {
        
        width: 200px;
        height: 200px;
        background: red;
        color: #fff;
        font-size: 30px;
    }
    </style>
    <script>
    document.addEventListener(
        "touchstart",
        function(e) {
            e.preventDefault();
        }
    );
    /*
        touches 当前屏幕上的手指列表
        targetTouches 当前元素上的手指列表
        changedTouches 触发当前事件的手指列表
    */
    window.onload = function () {
        var box = document.querySelector("#box");
        box.addEventListener(
            "touchend",
            function (e){
                this.innerHTML = e.touches.length;
            }
        );
    };
    </script>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

![复制代码][copycode.gif]

[copycode.gif]: /images/20220604/5f190d157e7044458186ddfd260ce765.png