找回密码
当前位置：前端开发者 > JavaScript > 正文

移动端前端开发常用基础事件和交互

2018-07-11 分类：JavaScript 阅读(713) 评论(0)

前端开发经理待遇|前端开发文本编辑器|前端开发编辑器排名

一:移动端基础事件

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

  1. 不会存在前后覆盖问题
  2. 在chrome的模拟器下可以一直识别
    javascript 代码
<script>
    //addEventListen可以同时对一个元素添加多个事件
    element.addEventListener(
        “touchstart”,
        function () {
            console.log(1);
        }
    );
    element.addEventListener(
        “touchstart”,
        function () {
            console.log(2);
        }
    );
    //还可以定义函数,然后直接写函数名
    element.addEventListener(
        “touchstart”,
        fn
    );
    function fn() {
        console.log(3);
    }
</script>

二:事件冒泡和捕获

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

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

三.事件点透

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

<!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=”https://www.rokub.com”>网站前端开发|web前端</a>
    <div id=”div”></div>
</body>
</html>

四.防止误触事件

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

<!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=”https://www.rokub.com”>网站前端开发|web前端</a>
    <a href=”https://www.rokub.com”>网站前端开发|web前端</a>
    <a href=”https://www.rokub.com”>网站前端开发|web前端</a>
    <a href=”https://www.rokub.com”>网站前端开发|web前端</a>
    <a href=”https://www.rokub.com”>网站前端开发|web前端</a>
</body>
</html>

四:tocuhEvent事件

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

<!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>

前端手机开发手指按下抬起事件|现在前端开发主要技术|前端开发天极传媒集团怎么样?

赞(0)
前端开发者 » 移动端前端开发常用基础事件和交互
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论