移动端事件

发表于

移动端事件

移动端事件和PC端不太一样，处理方式也有区别

  • touch单手指事件
    • touchstart
      -

PC端事件

  • mouseover
  • mouseenter区别：默认阻止了事件的冒泡传播
  • mouseleave
  • mousewheel
  • mouseout
  • mousedown
  • mouseup
  • contextmenu鼠标右键事件行为
  • click点击（不是单击）与移动端不同
  • dblclick双击
  • resize:window.onresize当浏览器窗口大小发生改变触发这个事件
  • unload：关闭
  • DOMContentLoaded:DOM2独有的事件，JQ中的$(document).ready()就是采用这个事件来操作的，他的意思是当HTML结构加载完成就会触发这个事情区别于window.ready
  • …
    事件对象
  • e

事件传播机制：

  • 捕获阶段：从document来时一直查找到事件源
  • 冒泡阶段：从事件源开始一直传播到document

移动端事件

区别：

  • mouse系列的事件在手机端是不兼容的，也没法使用
  • 键盘相关系列的（key）在手机端也不兼容，因为手机端是虚拟的键盘=》这一系列事件我们使用input事件代替
    其余的常用事件和PC端一样也存在，是不过部分事件表现形式不一样

    在移动端虽然我们可以使用click，但是click事件存在300ms的延迟：当用户完成第一次点击操作的时候，浏览器会等待300ms来验证一下是否触发第二次，如果操作了就属于双击，否则为单击

但是在平时的项目操作中,我们是不想要这300ms延迟的，这样的话就不能使用click事件了，需要我们自己模拟出一个单击操作：

touch事件模型，移动端专用的单手指事件模型，里面提供了常用的事件

  • touchstart:手指按下触摸在屏幕上
  • touchmove
  • touchend手指离开屏幕
  • touchcancel由于意外导致当前操作被中断执行（没什么卵用）
    移动端事件库：fastclick.js
    专门解决移动端click事件300ms延迟的，如果你当前的项目中已经使用了click事件，我们想要解决300ms延迟的问题，一个个的把click替换太麻烦，fastClick帮我们解决这个问题
  • 它使用的是Touch事件模拟了一套tap点击操作
  • 当我们执行fastClick.attach的时候，参数传递进来的是哪一个元素，相当于把点击操作委托给了这个元素（事件委托）
  • 当这个容器中的任何一个元素发生点击的操作，都会执行我们自己制定的那一套tap机制
    1
    2
    3
    4
    <script src='fastClick.js'></script>
    <script>
    	FastClick.attach(document.body);
    </script>
百度云touch手势事件库：touch-0.2.14.min.js

over了

Zepto.js移动端的小型jQuery

jQuery怎么用它怎么用

区别：Zepto更适合移动端的开发

  • Zepto更小
    • Zepto没有兼容IE低版本浏览器
    • Zepto只实现了jQ常用的方法，很多的方法没有实现
  • Zepto的animate方法中提供了transform变形属性的设置，而jQ没有
  • Zepto中提供了一些方法，而这些方法都是基于touch事件专门为移动端而准备的
    • tap点击
    • singleTap
    • doubleTap
    • longTap
    • swipe
    • swipeLeft/Top/Right/Down
      移动端事件中的多手指事件

      gesture

  • gesturestart
  • gesturechange
  • gestureend