移动端基本事件

来源：互联网发布：手机网络信号检测软件编辑：程序博客网时间：2024/06/04 23:28

通过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.lengthe)获取坐标 e.changedTouches[0].pageX12、手指对象的区别a)在touchend的时候想要获取手指列表，只能用changedTouchesb)原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches

阅读全文

0 0