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

本篇文章主要介绍了"JavaScript 事件——“事件类型”中“设备事件”和“触摸与手势事件”的注意要点"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 设备事件orientationchange事件该事件的window.orientation属性中包含3个值：0表示肖像模式、90表示左旋转的横向模式、-90表示...

设备事件

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

如：

丄

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

触摸与手势事件

触摸事件