移动端事件

一:理解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+"
"+"y:"+y+"
"+"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+"
"+"beta:"+beta+"
"+"gamma:"+gamma; } } else{ redDiv.innerHTML="换个手机"; }

你可能感兴趣的:(移动端事件)