移动端基本事件

站在顶峰看星星

于 2020-08-23 08:14:57 发布

阅读量204

点赞数

分类专栏： App 文章标签： react native android ios web app javascript

本文链接：https://blog.csdn.net/qq_40254596/article/details/108178968

版权

App 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、基础事件

1、PC端事件

a）onclick 鼠标点击触发
b）onmousedown 鼠标按下触发
c）onmousemove 鼠标移动触发
d）onmouseup 鼠标抬起触发

2、移动端触屏事件

a) ontouchstart 手指按下触发
b) ontouchmove 手指移动触发
c) onTouchend 手指抬起触发

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <title>wwg</title>
  <style>
    body{font-family:"Microsoft yahei";}
    body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
    ol,ul,li{margin:0;padding:0;list-style:none;}
    img{border:none;display: block;}
    a{text-decoration: none; color: inherit;}
    input{outline: none;}
    .fl{float: left;}
    .fr{float: right;}    
    .clearfix::after{display: block; content: ""; clear: both;}
    
    #touch {
      width: 200px;
      height: 200px;
      background: #f0f;
    }
  </style>
</head>
<body>
  <div id="touch"></div>

  <script>
    let touch = document.getElementById('touch');

    // 手指按下 === 鼠标按下
    touch.addEventListener('touchstart', function (e) {
      console.log(e)
      console.log(e.touches)
      console.log(e.touches[0]) // 常用属性
      console.log(e.touches.length) // length表示手指的个数
      this.style.backgroundColor = "deeppink"
    })

    // 手指按下后移动 === 鼠标按下后移动
    let n = 0;
    touch.addEventListener('touchmove', function (e) {
      this.innerHTML = n++;
      this.style.backgroundColor = "#0f0";
    })

    // 手指抬起 === 鼠标抬起
    touch.addEventListener('touchend', function () {
      this.style.backgroundColor = "red";
    })


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

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) 但网页上的所有滚动条失效
e) 一般不会阻止默认