移动Web特效开发

文章目录

移动Web特效开发(部分)移动上的事件移动上的click触摸事件 Zepto框架Zepto概述Zepto和jQuery的区别

移动Web特效开发(部分)

移动上的事件

移动上的click

/* 在手机端的点击事件有300毫秒的延迟 这是以为手机屏幕需要是被用户的 操作到底是点击还是拖拽 如果300毫秒内没有任何操作视为点击,但是 如 果兼容了手机屏幕就不会存在延迟问题*/ var span = document.getElementsByTagName('span')[0]; span.onclick = function(){ alert('点击了span元素'); };

触摸事件

事件描述touchstart手指刚接触屏幕时触发touchmove手指在屏幕上移动时触发touchend手指从屏幕上移开时触发

这些事件得到了大多数触屏浏览器的支持,但IE浏览器是个例外.

/* 触摸事件 至于移动端有触摸事件 PC端没有*/ /* 触摸开始事件 */ span.addEventListener("touchstart",function (event) { console.log(event); div.style.display = "block"; console.log("我们监听到触摸事件") },false); /* 触摸当中事件 */ span.addEventListener("touchmove",function (event) { console.log("用户在移动") }); /* 触摸结束事件 */ span.addEventListener("touchend",function (event) { div.style.display = "none"; console.log("触摸结束"); console.log(event); },false)

addEventListener是一个侦听事件并处理相应事件的函数.一般有三个参数:第一个是事件的类型,第二个是侦听到事件后处理事件的函数,第三个是事件捕获(只有两个值,true和false)

PS:由于触摸会导致屏幕动来动去,因此可以通过在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动

除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性:

touches:表示当前跟踪的触摸操作的touch对象的数组

当一个手指在触屏上时,event.touches.length=1当两个手指在触屏上时,event.touches.length=2,以此类推

changedTouches:导致触摸事件被触发的触摸点数组

targetTouches:特定于事件目标的touch对象数组

​ 触摸事件坐标

属性描述clientX触摸目标在视口中的X坐标clientY触摸目标在视口中的Y坐标identifier表示触摸的唯一IDpageY触摸目标在页面中的Y坐标screenX触摸目标在屏幕中的X坐标screenY触摸目标在屏幕中的Y坐标target触摸的DOM节点目标

Zepto框架

Zepto概述

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架,拥有和jQuery相似的语法.

Zepto和jQuery的区别

(1)针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互,Zepto时不支持IE浏览器的.

(2)DOM操作的区别:添加id时jQuery不会生效,而Zepto会生效

(3)事件触发的区别:使用jQuery时load事件的处理函数不会执行,使用Zepto时load事件的处理函数会执行

(4)事件委托的区别:在Zepto中,document上所有的click委托事件都依次放入一个队列中,单击的时候先看当前元素是不是.a,符合则执行,然后查看是不是.b,符合则执行.而jQuery中,document上委托了两个click事件,单击后通过选择符进行匹配,执行相应元素的委托事件.

(5)width()和height()的区别:Zepto由盒子模型(box-sizing)决定,用.width()返回赋值的width,用.css(‘width’)返回包含border等的结果;jQuery会忽略盒子模型,始终返回内容区域的宽/高(不包含padding,border)

(6)offset的区别:Zepto返回{top,left,width,height},jQuery返回{width,height}

(7)Zepto无法获取隐藏元素宽高,jQuery可以

(8)Zepto中没有为原型定义extend方法,而jQuery有

(9)Zepto的each方法只能遍历数组,不能遍历JSON对象 to无法获取隐藏元素宽高,jQuery可以

(8)Zepto中没有为原型定义extend方法,而jQuery有

(9)Zepto的each方法只能遍历数组,不能遍历JSON对象