JavaScript 事件——“事件类型”中“设备事件”和“触摸与手势事件”的注意要点

摘要：对象不包含任何信息事件事件，该事件已被移除，应该使用事件但是事件仍然是实验性的事件，目前有部分浏览器暂时不支持。每个触摸事件的对象都提供了在鼠标事件中常见的属性。

该事件的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;
});

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：表示设备的指南针是否校准过；

如：

丄

window.addEventListener("deviceorientation", function () {
    var info = document.getElementById("info");
    info.style.webkitTransform = "rotate(" + -Math.round(event.alpha) + "deg)";
});

该事件是要告诉开发者设备什么时候移动，如通过该事件检测设备是否在往下掉，是否被走着的人拿在手里等等。

属性：

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
    }
});

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);