移动端事件

1.网络状态改变事件

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

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

// 网络状态改变事件
    window.addEventListener("online",function() {
           box.innerHTML = '网络已链接';
    })
    window.addEventListener( "offline",function() {
        box.innerHTML = '网络已断开';
    })

2.全屏

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

2.1 全屏方法

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

由于兼容问题,需要加兼容前缀,例如webkit内核浏览器:webkitRequestFullScreen

处理兼容的写法

if(img.requestFullScreen){
    img.requestFullScreen()
}else if(img.webkitRequestFullScreen){
    img.webkitRequestFullScreen()
}

2.2 全屏伪类选择器

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

full.onclick = function(){
    img.webkitRequestFullScreen()
    setTimeout(function(){
        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.9 防止误触问题

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

box.addEventListener(
    "touchmove",
    function() {
        this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
    })

box.addEventListener(
    "touchend",
    function() {
        //如果是移动就不会走if里边的事件.
        if(!this.isMove) {
            // window.location.href = this.href;
            console.log(1)
        }
        this.isMove = false;
        console.log(1)
    }

3.10 300ms延迟

移动端网页点击历史问题

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

解决300ms延迟

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

注意:touch事件不会等300ms