移动端事件

2022-05-25  本文已影响0人  心存美好

1. 网络状态改变事件

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

  1. online 网络已连接
  2. offline 网络已断开
<body>
  <script>
    // 找到控制台中的network模拟断网-->点击向下的箭头,选择offline 或online就会触发断网,连网事件
    window.addEventListener("online", function () {
      console.log('网络已连接')
    })
    window.addEventListener("offline", function () {
      console.log('网络断开')
    })
  </script>
</body>

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()
}
// ......

full.onclick = function(){
    img.webkitRequestFullScreen()
    setTimeout(function(){
        alert(document.fullscreen)
    },2000)
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>

<body>
  <div id="fullscreen">
    <h1>大家好</h1>
    <p>hello world</p>
    <button id="full">全屏</button>
    <button id="cacelfull">取消全屏</button>
  </div>
  <script>
    full.onclick = function () {//全屏
      fullscreen.webkitRequestFullScreen()
      //检查是否全屏，全屏返回true 不全屏false。需要有个延迟
      setTimeout(() => {
        console.log(document.fullscreen)
      }, 1000)
    }
    cacelfull.onclick = function () {//退出全屏
      document.webkitCancelFullScreen()
      //检查是否全屏，全屏返回true 不全屏false。需要有个延迟
      setTimeout(() => {
        console.log(document.fullscreen)
      }, 1000)
    }
  </script>
</body>

</html>
2.2 全屏伪类选择器

:fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>
<style>
  #fullscreen:fullscreen h1 {
    /*伪类：fullscreen如果处于全屏状态 */
    color: red;
  }

  #fullscreen:fullscreen p {
    /*伪类：fullscreen如果处于全屏状态 */
    color: yellow;
  }
</style>

<body>
  <div id="fullscreen">
    <h1>大家好</h1>
    <p>hello world</p>
    <button id="full">全屏</button>
    <button id="cacelfull">取消全屏</button>
  </div>
  <script>
    full.onclick = function () {//全屏
      fullscreen.webkitRequestFullScreen()
      //检查是否全屏，全屏返回true 不全屏false。需要有个延迟
      setTimeout(() => {
        console.log(document.fullscreen)
      }, 1000)
    }
    cacelfull.onclick = function () {//退出全屏
      document.webkitCancelFullScreen()
      //检查是否全屏，全屏返回true 不全屏false。需要有个延迟
      setTimeout(() => {
        console.log(document.fullscreen)
      }, 1000)
    }
  </script>
</body>

</html>

3. 移动端事件

3.1、PC端事件
  1. onclick 鼠标点击触发
    . onmousedown 鼠标按下触发
    . onmousemove 鼠标移动触发
    . onmouseup 鼠标抬起触发
3.2、移动端触屏事件
  1. ontouchstart 手指按下触发(相当于mousedown)
    . ontouchmove 手指移动触发
    . 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 当前屏幕上的手指列表(所有触点的集合)
    . targetTouches 当前元素上的手指列表(触发事件元素上的触点集合) changedTouches 触发当前事件的手指列表
  2. 获取手指的个数 e.changedTouches.length
  3. 获取坐标 e.changedTouches[0].pageX
3.8、手指对象的区别
  1. 在touchend的时候想要获取手指列表，只能用changedTouches
  2. 原因在于，手指抬起了，也就没有touches(屏幕上的手指个数),targetTouches（元素上的手指个数）了
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>

<body>
  <script>
    //PC鼠标事件  移动端touch事件
    document.onmousedown = function (ev) {//鼠标按下
      console.log('onmousedown', ev);
    }
    document.onmouseup = function (ev) {//鼠标抬起
      console.log('onmouseup', ev);
    }
    document.onmousedown = function (ev) {//一次按下 一次抬起 触发一次单击
      console.log('onmouseclick', ev);
    }
    document.ontouchstart = function (ev) {//手指按下触发
      console.log('ontouchstart', ev);
      console.log(ev.changedTouches.length)//获取手指个数
    }

    document.ontouchmove = function (ev) {//手指移动触发
      console.log('ontouchmove', ev);
    }
    document.ontouchendt = function (ev) {//手指抬起触发
      console.log('ontouchend', ev);
    }
  </script>
</body>

</html>
3.9、防止误触问题
  1. 用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    //防误触
    box.addEventListener( //通过addEventListener绑定了touchmove事件，手指一移动，会给box绑定isMove属性，值为true。
      "touchmove",
      function () {
        this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
      })

    box.addEventListener(//每次鼠标按下抬起时，判断鼠标是否移动，如果移动可能是误触，不是点击事件。
      "touchend",
      function () {
        //如果是移动就不会走if里边的事件.
        if (!this.isMove) {//这里是真正的点击事件 移动了就不是点击事件
          // window.location.href = this.href;
          console.log('1这里是真正的点击事件')
          return;
        }
        this.isMove = false;
        console.log('2误触')
      })
  </script>
</body>

</html>
3.10 300ms延迟

移动端网页点击历史问题

  1. 移动端屏幕小,pc网页大

  2. 网页缩小了,双击放大

  3. 单机后等待300ms, 判断用户是不是双击

解决300ms延迟 https://github.com/ftlabs/fastclick（链接中有使用方法）借助第三方工具---fastclick方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="box"></div>
    //使用前要先引入FastClick。通过在线的cdn，搜boots cdn--搜fastclick-->复制fastclick的js代码地址
  <script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
  <script>
    //防误触解决移动端300ms延迟--借助第三方工具FastClick
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);//FastClick在整个页面生效
      }, false);
      box.onclick = function () {
        console.log(1111);
      }
    }
  </script>
</body>

</html>

注意: touch事件不会等300ms

解决300ms延迟方法二--加上阻止用户点击user-scalable=no，阻止放大相当于阻止了双击

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

4. 其他移动端事件

4.1 tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

4.2. swipe类事件

滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

swipe：手指在屏幕上滑动时会触发

swipeLeft：手指在屏幕上向左滑动时会触发

swipeRight：手指在屏幕上向右滑动时会触发

swipeUp：手指在屏幕上向上滑动时会触发

swipeDown：手指在屏幕上向下滑动时会触发

上一篇 下一篇

猜你喜欢

热点阅读