一：理解click的300ms的延迟响应
Click事件在移动手机开发中有300ms的延迟，因为在手机早期，浏览器系统有放大和缩放功能，用户在屏幕上点击两次之后，系统会触发放大或者缩放功能，因此系统做了一个处理，当触摸一次后，在300ms这段时间内有没有触摸第二次，如果触摸了第二次的话，说明是触发放大或缩放功能，否则的话是click事件。因此当click时候，所有用户必须等待于300ms后才会触发click事件。所以当在移动端使用click事件的时候，会感觉到有300ms的迟钝。
二、手势事件
ontouchstart相对于onmousedown 就是触到屏幕时就会触发，几个手指就加几次
ontouchmove 手指在屏幕上移动就会触发
ontouchend 手指从屏幕上抬起来时触发
touchcancel： 当系统停止跟踪时触发; 该事件暂时使用不到;
每个触屏事件都包含事件对象，常用的有3个
touch 屏幕上所有得手指列表
targetTuches元素内的所有手指列表
changedTouches改变状态的手指事件
触摸属性如下介绍：
touches: 表示当前跟踪的触摸操作的touch对象的数组。
当一个手指在触屏上时，event.touches.length = 1; 当二个手指在触屏上时，event.touches.length=2, 以此类推；
targetTouches: 特定于事件目标的touch对象的数组。touch事件会毛冒泡，所以我们可以使用这个属性指出目标对象。
changedTouches: 表示上次触摸以来发生了什么改变的touch对象的数组。
每个touch对象都包含了以下几个属性：
clientX 触摸目标在视口中的X坐标。
clientY触摸目标在视口中的Y坐标。
Identifier: 标示触摸的唯一ID。
pageX 触摸目标在页面中的X坐标。
pageY 触摸目标在页面中的Y坐标。
screenX触摸目标在屏幕中的X坐标。
screenY 触摸目标在屏幕中的Y坐标。
target 触摸的DOM节点目标。
阻止默认事件，由于触摸会导致屏幕动来动去，所以我们可以在这些事件中函数内部使用 event.preventDefault()等来阻止掉默认事件(默认滚动).
evObj.preventDefault();
evObj.returnValule = false;
return false;
两个设备事件 加速仪和陀螺仪
1、动态的重力加速度
2、静态的手机朝向
if (window.DeviceMotionEvent) {
redDiv.innerHTML="支持";
//动态的重力加速度
window.ondevicemotion=function(ev){
var evObj=window.event||ev;
var x=parseInt(evObj.accelerationIncludingGravity.x);
var y=parseInt(evObj.accelerationIncludingGravity.y);
var z=parseInt(evObj.accelerationIncludingGravity.z);
// count++;
blueDiv.innerHTML="x:"+x+"<br/>"+"y:"+y+"<br/>"+"z:"+z;
}
//静态的手机朝向
window.ondeviceorientation=function(ev){
var evObj=window.event||ev;
var alpha=parseInt(evObj.alpha);
var beta=parseInt(evObj.beta);
var gamma=parseInt(evObj.gamma);
blueDiv.innerHTML="alpha:"+alpha+"<br/>"+"beta:"+beta+" <br/>"+"gamma:"+gamma;
}
}
else{
redDiv.innerHTML="换个手机";
}
网友评论