js移动端事件基础及常用事件库详解


Posted in Javascript onAugust 15, 2017

一、事件基础

PC:click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change...

移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup、keydown)...TOUCH事件模型(处理单手指操作)、GESTURE事件模型(处理多手指操作)

TOUCH:touchstart、touchmove、touchend、touchcancel

GESTURE:gesturestart、gesturechange、gestureend

1、click:在移动端click属于单击事件,不是点击事件,在移动端的项目中我们经常会区分单击做什么和双击做什么,所以移动端的浏览器在识别click的时候,只有确定是单击后才会把它执行:

在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后,还需要等到300ms看是否触发了第二次点击,如果触发了第二次点击就不属于click了,没有触发第二次点击才属于click

下面代码是移动端模拟click时间的代码

function on(curEle,type,fn){
   curEle.addEventListener(type,fn,false);
  }
  var oBox = document.querySelector('.box');
  //移动端采用click存在300ms延迟
  // oBox.addEventListener('click',function(){
  //  this.style.webkitTransform = 'rotate(360deg)'
  // },false)
  //使用TOUCH事件模型实现点击操作(单击&&双击)
  on(oBox,'touchstart',function(ev){
   //ev:TouchEvent事件 属性 type、target、preventDefault(returnValue)、stopPropagation、changedTouches、touches
   //changedTouches和touches都是手指信息的集合(touchList),touches获取到值的必要条件只有手指还在屏幕上才可以获取,所以在touchend事件中如果想获取手指离开的瞬间坐标只能使用changedTouches获取
   var point = ev.touches[0];
   this['strX'] = point.clientX;
   this['strY'] = point.clientY;
   this['isMove'] = false;
  })
  on(oBox,'touchmove',function(ev){
   var point = ev.touches[0];
   var newX = point.clientX,
    newY = point.clientY;
   //判断是否发生滑动,我们需要判断偏移的值是否在30PX以内
   if(Math.abs(newX-this['strX'])>30 || Math.abs(newY-this['strY'])>30){
    this['isMove'] = true;
   }
  })
  on(oBox,'touchend',function(ev){
   if(this['isMove'] === false){
    //没有发生移动 点击
    this.style.webkitTransitionDuration = '1s';
    this.style.webkitTransform = 'rotate(360deg)';
    var delayTimer = window.setTimeout(function(){
     this.style.webkitTransitionDuration = '0s';
     this.style.webkitTransform = 'rotate(0deg)';
    }.bind(this),1000);
   }else{
    //滑动
    this.style.background = 'red';
   }
  })

同时也可以使用fastclick.js来解决移动端click事件的300ms延迟 (github地址https://github.com/zhouxiaotian/fastclick)

2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑

单击和双击(300MS)

点击和长按(750MS)

点击和滑动(X/Y轴偏移的距离是否在30PX以内,超过30PX就是滑动)

左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑 相反就是上下滑)

左滑和右滑(偏移的距离 >0 = 右滑  相反就是左滑)

二、常用的事件库

FastClick.js :解决CLICK事件300MS的延迟

TOUCH.js:百度云移动手势库  GitHub地址  https://github.com/Clouda-team/touch.code.baidu.com

实例如下:

var oBox = document.querySelector('.box');
  //单击
  touch.on(oBox,'tap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //双击
  touch.on(oBox,'doubletap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(-360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //长按
  touch.on(oBox,'hold',function(ev){
   this.style.backgroundColor = 'red';
  })

HAMMER.js

Zepto.js:被誉为移动端的小型JQ,JQ由于是在PC端使用的,所以代码中包含了大量对于ie低版本浏览器的兼容处理,而ZEPTO只应用在移动端开发,所以在JQ的基础上没有对低版本的ie进行支持

JQ中提供了很多的选择器类型及DOM操作方法,但是ZEPTO只是实现了部分常用的选择器和方法。例如:JQ中的动画方法有animate、hide、show、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle...但是在ZEPTO中只有animate

ZEPTO的源代码大小比JQ小很多

ZEPTO专门为移动端开发而诞生,所以相对于JQ来说更适合移动端:

ZEPTO的animate动画方法支持了CSS3动画的操作

ZEPTO专门的准备了移动端常用 的事件操作:tap、singleTap、doubleTap、longTap、swipe、swipeUp、swipeDown、swipeLeft、swipeRight

实例代码如下:

$('.box').singleTap(function(ev){
   $(this).animate({
    rotate:'360deg'
   },1000,'linear',function(){
    this.style.webkitTransform = 'rotate(0)'
   })
  })

  $('.box').on('touchstart',function(){
   $(this).css('background','red')
  })
  $.ajax({
   url:'',
   type:'get',
   dataType:'json',
   cache:false,
   success:function(){
    
   }
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
js实现移动端轮播图效果
Dec 09 #Javascript
JavaScript递归算法生成树形菜单
Aug 15 #Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 #Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
vue的基本用法与常见指令
Aug 15 #Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 #Javascript
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
js中开关变量使用实例
2017/02/24 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JS库之ParticlesJS使用简介
2017/09/12 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
标准化管理实施方案
2014/02/25 职场文书
活动宣传策划方案
2014/05/23 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
详解Redis瘦身指南
2021/05/26 Redis
用python画城市轮播地图
2021/05/28 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android