设备事件
orientationchange
事件
该事件的window.orientation
属性中包含3个值:0表示肖像模式、90表示左旋转的横向模式、-90表示右旋转的横向模式。event对象不包含任何信息:
window.onload = function () {
var div = document.getElementById("info");
div.innerHTML = "Current orientation is " + window.orientation;
};
window.addEventListener("orientationchange", function () {
div.innerHTML = "Current orientation is " + window.orientation;
});
deviceorientationevent
事件
,该事件已被移除,应该使用MozOrientation
事件DeviceOrientationEvent
事件
Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.
但是DeviceOrientationEvent事件仍然是实验性的事件,目前有部分浏览器暂时不支持。
该事件的意图是告诉开发者设备在空间中朝向哪儿,设备在三维空间中是靠x、y、z轴来定位的。
事件对象包含:
alpha:围绕z轴旋转,y轴的度数差;0~360的值;
beta:围绕x轴旋转,z轴的度数差;-180~180的值;
gamma:围绕y轴旋转,z轴的度数差;-90~90的值;
absolute:表示设备是否返回一个绝对值;
compassCalibrated:表示设备的指南针是否校准过;
如:
<div id="info">丄</div>
window.addEventListener("deviceorientation", function () {
var info = document.getElementById("info");
info.style.webkitTransform = "rotate(" + -Math.round(event.alpha) + "deg)";
});
devicemotion
事件
该事件是要告诉开发者设备什么时候移动,如通过该事件检测设备是否在往下掉,是否被走着的人拿在手里等等。
属性:
acceleration:包含x、y、z属性的对象,不考虑重力的情况下,每个方向的加速度;
accelerationIncludingGravity:包含x、y、z属性的对象,在考虑z自然重力加速度的情况下,每个方向上的加速度;
interval:毫秒值,必须在另一个devicemotion事件触发前传入;
rotationRate:包含表示方向的alpha、beta和gamma属性的对象;
如果读取不到值,会返回null,所以应该先检测它们的值是否为null:
window.addEventListener("devicemotion", function () {
if (event.rotationRate !== null) {
// statement
}
});
触摸与手势事件
触摸事件
兼容DOM的触摸事件
touchstart:触摸屏幕时触发;
touchmove:滑动时触发,调用preventDefault()函数可阻止滚动;
touchend:当手指从屏幕上移开时触发;
touchcancel:当系统停止跟踪触摸时触发;
上面的事件都会冒泡,都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性。
跟踪触摸的事件
touches:表示当前跟踪的触摸操作的Touch对象的数组;
targetTouches:特定于事件目标的Touch对象的数组;
changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组;
每个Touch对象包含的属性:
clientX:视口中的x坐标;
clientY:;
identifier:标识触摸的唯一ID;
pageX:触摸目标在页面中的x坐标;
pageY:;
screenX:触摸目标在屏幕中的x坐标;
screenY:;
target:触摸DOM节点目标;
如:
function handleTouchEvent () {
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
output.innerHTML = "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchend":
output.innerHTML = "Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
window.addEventListener("touchstart", handleTouchEvent);
window.addEventListener("touchmove", handleTouchEvent);
window.addEventListener("touchend", handleTouchEvent);
暂时不清楚为什么touchend无反应。
手势事件
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发;
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发;
gestureend:当任何一个手指从屏幕上面移开时触发;
其中event还包括除鼠标事件的属性之外另外两个属性:rotation
和scale
:其中rotation属性表示旋转的角度,从0开始,负值表示逆时针旋转,正值表示顺时针旋转;scale属性从1开始,随着距离拉大而增加,随着距离缩小而减小:
var output = document.getElementById("output");
document.addEventListener("gesturestart", function () {
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});
document.addEventListener("gestureend", function () {
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});
document.addEventListener("gesturechange", function () {
event.preventDefault();
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});
写成:
function handleGestureEvent() {
var output = document.getElementById("output");
switch (event.type) {
case "gesturestart":
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
break;
case "gestureend":
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
break;
case "gesturechange":
event.preventDefault();
output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent);
document.addEventListener("gestureend", handleGestureEvent);
document.addEventListener("gesturechange", handleGestureEvent);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。