移动端基本事件

最新推荐文章于 2023-04-20 15:09:01 发布

维克多噗噗

最新推荐文章于 2023-04-20 15:09:01 发布

阅读量362

点赞数

分类专栏：移动端

移动端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过addEventListener绑定事件

    a)ontouchstart      手指按下触发
    b)ontouchmove       手指移动触发
    c)onTouchend        手指抬起触发   只可以获取changedTouches 手指的信息

手指列表changedTouches

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>移动端基本事件</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        .box {width: 300px; height: 300px; background: #f60; margin: 50px auto;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <script type="text/javascript">
    /*
    移动端事件
        a)ontouchstart      手指按下触发
        b)ontouchmove       手指移动触发
        c)onTouchend        手指抬起触发   只可以获取changedTouches 手指的信息
    a)通过on的方式添加touch事件在谷歌模拟器下无效
    b)后面的重复事件会覆盖前面的
    c)  鼠标事件 (click..)在移动端可以使用，但有300毫秒的延迟
     */
        var box = document.querySelectorAll('.box')[0];
        box.addEventListener('touchstart',function(e){
            // console.log(e);
            // e.cancelBubble = true;//阻止冒泡
            // this.style.background = 'green';
            /*
                获取手指信息
                    a)touches           当前屏幕上的手指列表
                    b)targetTouches         当前元素上的手指列表
                    c)changedTouches        触发当前事件的手指列表
                    d)获取手指的个数 e.changedTouches.length
                    e)获取坐标 e.changedTouches[0].pageX
             */
            // 多少个手指e.touches.length
            console.log(e.touches[0]); //第一个手指
            /* 坐标 client  page  安卓下值为小数   ios 整数 */
            console.log(e.touches[0].pageX);
            console.log(e.touches[0].pageY);
            var x1 = e.touches[0].pageX,
                y1 = e.touches[0].pageY;
            e.preventDefault();


            box.addEventListener('touchmove',function(e){
                // 阻止手机默认事件
                e.preventDefault();

                box.innerHTML = `
                    X:${e.touches[0].pageX}</br>
                    Y:${e.touches[0].pageY}</br>
                `;

            })
            box.addEventListener('touchend',function(e){
                console.log(e.touches,e.targetTouches); //没有信息
                var x2 = e.changedTouches[0].pageX,
                    y2 = e.changedTouches[0].pageY;
                box.innerHTML = `
                    抬起后移动的距离:</br>
                    X:${x2-x1}</br>
                    Y:${y2-y1}</br>
                `;
            })

        })


    </script>
</body>
</html>

手指移动时a标签不跳转 (现在手机已实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>手指移动时a标签不跳转</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        a {display: block; width: 50px; height: 30px; padding: 10px; border: 1px solid #ddd;}
    </style>

</head>
<body>
    <img src="1.png">
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.jd.com">京东</a>
    <a href="http://www.taobao.com">淘宝</a>
    <script type="text/javascript">
        /*
            现在已经支持

                设置一个开关
         */
         document.addEventListener('touchstart',function(e){
            e.preventDefault(); //先阻止默认跳转
         })
        var aDom = document.querySelectorAll("a");
        for (var i = 0; i < aDom.length; i++) {
            this.mark = false;
            aDom[i].addEventListener('touchmove',function(e){
                this.mark = true;
            })
            aDom[i].addEventListener('touchend',function(e){
                if(!this.mark){
                    window.location.href = 'this.href';
                    // location.reload()刷新页面
                }
                this.mark = false;
            })
        }
    </script>
</body>
</html>

笔记

第一章：移动开发班

一、新的api获取元素的方法
1、document.querySelector(参数)
a)获取的是一个元素
b)返回的是一个对象
c)没有length属性
d)相当于 document.getElementById(参数)
e)参数须符合css selector的字符串
2、document.querySelectorAll(参数)
a)获取的是一组元素
b)返回的是节点列表
c)有length属性
d)相当于 document.getElementsByTagName(参数) document.getElementsByClassName( )
e)参数须符合css selector的字符串
3、用法
a)Document.querySelector(‘div’) 获取的是网页上 第一个div元素
b)Document.querySelector(‘#box’) 返回id为box的节点
c)Document.querySelector(‘#box div’) 返回id为box的节点下的第一个div节点
d)Document.querySelecto(‘.wrap’) 获取的是第一个class名为wrap的元素
e)Document.querySelectorAll(‘div’) 获取的是网页上所有的div元素
f)Document.querySelectorAll(‘.wrap’) 获取的是class名为wrap的所有的元素集合
g)Document.querySelectorAll(‘ul li’) 返回的是class名为ul元素下的li元素列表
4、区别
a)一些框架如jQuery、jqmobile都是基于querySelector进行封装的
b)旧选择器性能比新的好，但新的选择器用着方便，大型互联网公司都是用新选择器
二、基础事件
1、PC端事件
a) onclick          鼠标点击触发
b）onmousedown   鼠标按下触发
c）onmousemove   鼠标移动触发
d) onmouseup        鼠标抬起触发






2、移动端事件
a)ontouchstart      手指按下触发
b)ontouchmove       手指移动触发
c)onTouchend        手指抬起触发
3、PC端事件和移动端事件的区别
a)通过on的方式添加touch事件在谷歌模拟器下无效
b)通过on的方式添加事件会前后覆盖
c)鼠标事件在移动端可以使用，但有300毫秒的延迟
4、事件监听
a)addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定 
b)绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
c)在谷歌模拟器下一直识别
d)冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
e)捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行
5、event对象
a)标准事件函数默认的第一个参数
b)是描述发生事件的详细信息
6、阻止默认事件
a)事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
b)比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
c)e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
d)但网页上的所有滚动条失效
7、阻止冒泡
a) 在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时需要复制文本





8、事件点透问题
a)PC端鼠标事件,在移动端也可以正常使用，事件的执行会有300毫秒的延迟
b)问题的产生是，点击了页面之后，浏览器会记录点击下去的坐标
c)300毫秒之后，在该坐标找到现在的元素，执行该事件
9、点透问题解决办法
a)阻止默认事件，但在部分安卓机不支持
b)不用a标签做页面跳转，用window.location.href做跳转，比如移动端淘宝
c)在移动端不用鼠标事件
10、防止误触问题
a)用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转
11、获取手指信息
a)touches           当前屏幕上的手指列表
b)targetTouches         当前元素上的手指列表
c)changedTouches        触发当前事件的手指列表
d)获取手指的个数 e.changedTouches.length
e)获取坐标 e.changedTouches[0].pageX
12、手指对象的区别
a)在touchend的时候想要获取手指列表，只能用changedTouches
b)原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches

维克多噗噗

关注

0
点赞
踩
0

收藏

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

第一章：移动开发班一、新的api获取元素的方法1、document.querySelector(参数)a)获取的是一个元素b)返回的是一个对象c)没有length属性d)相当于 document.getElementById(参数)e)参数须符合css selector的字符串2、document.querySelectorAll(参数)a)获取的是一组元素b)返回的是节点列表c
复制链接

扫一扫