2

设备事件

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还包括除鼠标事件的属性之外另外两个属性:rotationscale:其中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);

JS菌
6.4k 声望2k 粉丝