<强> 1。触摸事件碰
,,,touchstart ,,,,手指放在屏幕上触发
,,,touchmove ,,手指在屏幕上移动,连续触发
,,,touchend ,,,,,手指离开屏幕触发
,,,touchcancel ,当系统停止跟踪时触发,该事件暂时用不到
演示:
document.addEventListener (touchstart,函数(ev) {
ev.preventDefault ();
});
var盒=. getelementbyid(“盒”);
box.addEventListener (touchstart,函数(){
this.innerHTML='手指按下了”;
});
box.addEventListener (touchmove,函数(){
this.innerHTML='手指移动了”;
});
box.addEventListener (touchend,函数(){
this.innerHTML='手指离开了”;
});
<强> 2.触摸事件对象
,,ev.touches ,,,,,,,,,,,,,,,当前屏幕的手指列表
,,ev.targetTouches ,,,,当前元素上的手指列表
,,ev.changedTouches 触发当前事件的手指列表
,,每个触摸对象都包含了以下几个属性(打印ev.touches如下):
,,,,,,clientX //触摸目标在视口中的X坐标。
,,,,,,clientY //触摸目标在视口中的Y坐标。
,,,,,,Identifier ,//标示触摸的唯一ID。
,,,,,,pageX //触摸目标在页面中的X坐标。
,,,,,,pageY //触摸目标在页面中的Y坐标。
,,,,,,screenX//触摸目标在屏幕中的X坐标。
,,,,,,screenY//触摸目标在屏幕中的Y坐标。
,,,,,,目标//触摸的DOM节点目标。
演示:
var盒=. getelementbyid(“盒”);//相当于mousedown
box.addEventListener (touchstart,函数(ev) {//console.log (ev.touches);
this.innerHTML=ev.touches.length;//按下手指数
});
<强> 3。设备加速度事件devicemotion
,devicemotion ,,封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
,其中加速度的数据包含以下三个方向:
,,x:横向贯穿手机屏幕;
,,y:纵向贯穿手机屏幕;
,,z:垂直手机屏幕
鉴于有些设备没有排除重力的影响,所以该事件会返回两个属性:
,
demo1:显示重力加速度的值
window.addEventListener (devicemotion,函数(ev) {
var运动=ev.accelerationIncludingGravity;box.innerHTML=' x: ' + motion.x + & lt; br/祝辞”+“y:”+ motion.y + & lt; br/祝辞”+“z:”+ motion.z;
});
以及接下来:方块跟着重力左右移动
window.addEventListener (devicemotion,函数(ev) {
var运动=ev.accelerationIncludingGravity;
var x=parseFloat (getComputedStyle(箱).left);//盒目前的值
box.style.left=x + motion.x +“px”;
});
demo3:摇一摇应用原理
var盒=. getelementbyid(盒);
var lastRange=0;//上一次摇晃的幅度
var isShake=false;//决定用户到底有没有大幅度摇晃
window.addEventListener (devicemotion,函数(ev) {
var运动=ev.accelerationIncludingGravity;
var x=Math.abs (motion.x);
var y=Math.abs (motion.y);
var z=Math.abs (motion.z);
var=x + y + z范围;//当前摇晃的幅度
如果(range-lastRange> 100) {//这个条件成立说明用户现在已经在大幅度摇晃
isShake=true;
}
如果(isShake,,range<50) {//这个条件成立,说明用户摇晃的幅度很小了就要停了
box.innerHTML='摇晃了”;
isShake=false;
}
});
之前
,,deviceorientation 封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据(手机所处的角度,方位和朝向等)
,,ev.beta ,,,,,,,,,,,,,表示设备在x轴上的旋转角度,范围为-180 ~ 180。它描述的是设备由前向后旋转的情况。
,,ev.gamma ,,,,,,,,表示设备在y轴上的旋转角度,范围为-90 ~ 90。它描述的是设备由左向右旋转的情况。
,,ev.alpha ,,,,,,,,,,,表示设备沿z轴上的旋转角度,范围为0 ~ 360。
演示:
window.addEventListener (deviceorientation,函数(ev) {
box.innerHTML=' x轴倾斜:' + ev.beta.toFixed (1) + ' & lt;/br> y轴倾斜:“+ ev.gamma.toFixed (1) + ' & lt;/br> z轴倾斜:“+ ev.alpha.toFixed (1);
});
