移动端常用事件整理

1. 网络状态改变事件

H5新增了两个监听网络状态改变的事件

1. online 网络已连接
2. offline 网络已断开

window.addEventListener('online',() => {
        console.log('网络已连接')
    });
    window.addEventListener('offline', () => {
        console.log('网络已断开')
    });

2. 全屏

HTML5规范允许用户自定义网页上的任意元素全屏显示.

2.1 全屏方法

1. Node.requestFullScreen() 开启全屏显示
2. document.cancelFullScreen 关闭全屏显示
3. document.fullscreen 检测是否处于全屏(尽量不用)

(由于兼容问题,这里以Chrome和Firefox浏览器为列)
处理兼容的写法

 but1.onclick = () => {//全屏显示
        if (box.requestFullscreen){
            box.requestFullscreen();
        }else if (box.webkitRequestFullScreen){
            box.webkitRequestFullScreen();
        }
    }
    but2.onclick = () => {//退出全屏
        if (document.cancelFullscreen){
            document.cancelFullscreen();
        }else if (document.webkitCancelFullScreen){
            document.webkitCancelFullScreen();
        }
    }
    but3.onclick = () => {//检测
        console.log(document.fullscreen)
    }

2.2. 全屏伪类选择器

.box:full-screen{}
.box:webkit-full-screen{}

but1.onclick = () => {//全屏显示
        if (box.requestFullscreen){
            box.requestFullscreen();
        }else if (box.webkitRequestFullScreen){
            box.webkitRequestFullScreen();
        }
        setTimeout(() => {//2s后检测是否全屏,然后弹窗返回结果
            alert(document.fullscreen)
        },2000);
    }

3. 移动端事件

3.1 pc端事件

1. onclick 鼠标点击触发
2. onmousedown 鼠标按下触发
3. onmousemove 鼠标移动触发
4. onmouseup 鼠标抬起触发

3.2 移动端事件

1. ontouchstart 手指按下触发(相当于mousedown)
2. ontouchmove 手指移动触发
3. ontouchend 手指抬起触发

3.3 事件监听

1. addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
2. 绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
3. 冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
4. 捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行

3.4 event对象

1. 标准事件函数默认的第一个参数
2. 是描述发生事件的详细信息

3.5 阻止默认事件

1. 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
2. 比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
3. e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象

3.6 阻止冒泡

1. 在需要的时候的，标准用e.stopPropagation( )阻止冒泡问题，比如有时需要复制文本

3.7 获取手指信息

1. touches 当前屏幕上的手指列表(所有触点的集合)
2. targetTouches 当前元素上的手指列表(触发事件元素上的触点集合)
3. changedTouches 触发当前事件的手指列表
4. 获取手指的个数 e.changedTouches.length
5. 获取坐标 e.changedTouches[0].pageX

3.8 防止误触问题

1. 用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转

const box = document.querySelector('.box');
    box.addEventListener('touchmove', () => {
        this.isMove = true;//定义一个变量来标识用户是否在元素上移
    })
    box.addEventListener('touchend', () => {
        if (!this.isMove){//如果是移动就不会走if里边的事件
            console.log(1)
        }
        this.isMove = false;
    })

3.9 300s延迟

1. 移动端屏幕小,pc网页大
2. 网页缩小了,双击放大
3. 单机后等待300ms, 判断用户是不是双击

解决300ms延迟(引入fastclick.js:https://github.com/ftlabs/fastclick)

if('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

注意: touch事件不会等300ms