移动Web特效开发

移动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	表示触摸的唯一ID
pageY	触摸目标在页面中的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对象