移动端基础
手机端最常用的事件
1.touchstart:开始触摸
2.touchmove:移动
3.touchcancle:触摸取消
4.touchend:触摸结束
当触摸被取消,标准里并没有明确说明它的触发时机,
但是我们可以这么认为,当我们正在运行程序时,
有电话打进,本地闹钟等时机,系统会丢弃该触摸事件,
同时系统会自动对当前数据进行保存,或者游戏正在运行时,将游戏暂停.
在移动端，如何绑定一个事件？
答:移动端一般使用这种添加事件的方式.
eg:document.addEventListener("touchstart",touchStart,false);
常用触摸事件的属性
1.touches 屏幕上有多少个触摸点的集合
2.targetTouches 事件源对象上的触摸点个数,当前被触摸的对象上的触摸点个数的集合
3.changedTouches 距离最近一次触摸变化的点的集合
//测试方式一般采用往元素上输出东西的模式
document.body.innerHTML += 'touches' + even.touches.length;
位置
1.clientX/clientY 距离浏览器可用范围的距离
2.screenX/screenY 距离屏幕左上角的距离
3.pageX/pageY 基于当前页面左上角的距离
元素拖拽
var div1 = document.getElementById("div1");
//声明两个对象,分别存储之前与之后的两个点的坐标
var startPoint = {x:0,y:0};
var endPoint = {x:0,y:0};
div1.addEventListener("touchstart",function(e){
var even = e || event;
//记录开始点的坐标
var obj = even.touches[0];
startPoint.x = obj.pageX;
startPoint.y = obj.pageY;
},false);
div1.addEventListener("touchmove",function(e){
var even = e || event;
var obj = even.touches[0];
endPoint.x = obj.pageX;
endPoint.y = obj.pageY;
//计算增量
var x = endPoint.x - startPoint.x;
var y = endPoint.y - startPoint.y;
div1.style.left = div1.offsetLeft + x + 'px';
div1.style.top = div1.offsetTop = y + 'px';
//重置起点
startPoint.x = endPoint.x;
startPoint.y = endPoint.y;
//去掉浏览器自己的滚动
even.preventDefault();
},false);
检测屏幕旋转
// 监测屏幕的旋转需要onorientationchange
window.onorientationchange = function(){
switch(window.orientation){
case 0:{
alert("竖直方向");
break;
}
case 90:{
alert("左横屏");
break;
}
case -90:{
alert("右横屏");
break;
}
}
}
摇一摇
必须结合硬件的特性
ondevicemotion:得到重力加速度
var startPoint = {x:0,y:0,z:0};
var endPoint = {x:0,y:0,z:0};
//设置一个临界值,当某一方向上的加速度大于临界值时,
//我们才认为用户在摇动手机
var max = 30;
window.ondevicemotion = function(e){
var even = e || event;
var acceleration = even.accelerationIncludingGravity;
startPoint.x = acceleration.x;
startPoint.y = acceleration.y;
startPoint.z = acceleration.z;
//先判断
var abs = Math.abs;
if(abs(endPoint.x - startPoint.x>max) ||
abs(endPoint.y - startPoint.y>max) ||
abs(endPoint.z - startPoint.z>max)){
alert("摇一摇");
break;
}
//在重置开始点的加速度
endPoint.x = startPoint.x;
endPoint.y = startPoint.y;
endPoint.z = startPoint.z;
}
touch.js
Touchjs的基本概念:
1.是什么?
Touchjs是移动设备上的手势和事件库,由百度云Clouda团队维护,
也是百度内部使用的开发工具
TouchJS的源码已经托管到github
TouchJs只能在webkit内核下的浏览器使用
2.如何使用touchJS
a.下载touchjs源码并引入工程里
b.绑定事件:touch.on(element,type,callback);
element:要绑定事件的元素
type:绑定的事件类型,可以接受多种类型,
多个类型之间用空格隔开,支持原生事件的透传.
(pinch,rotate,swipe,drag,hold,tap,doubletap)
callback:事件处理的函数