Window: deviceorientation 事件

基线 2023

新可用

自 2023 年 9 月起，此功能在最新的设备和浏览器版本上都能正常工作。此功能可能在较旧的设备或浏览器上无法正常工作。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在一些或所有支持的浏览器中可用。

deviceorientation 事件在从方向传感器获取到有关设备当前方向（相对于地球坐标系）的新数据时触发。这些数据来自设备内部的磁力计。

有关详细信息，请参阅方向和运动数据说明。

此事件不可取消，也不冒泡。

语法

在诸如addEventListener()之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("deviceorientation", (event) => {});

ondeviceorientation = (event) => {};

事件类型

一个DeviceOrientationEvent。继承自Event。

Event DeviceOrientationEvent

事件属性

DeviceOrientationEvent.absolute 只读

一个布尔值，指示设备是否提供绝对方向数据。

DeviceOrientationEvent.alpha 只读

一个表示设备绕 z 轴运动的数字，以度为单位，取值范围为 0（含）到 360（不含）。

DeviceOrientationEvent.beta 只读

一个表示设备绕 x 轴运动的数字，以度为单位，取值范围为 -180（含）到 180（不含）。这表示设备的前后运动。

DeviceOrientationEvent.gamma 只读

一个表示设备绕 y 轴运动的数字，以度为单位，取值范围为 -90（含）到 90（不含）。这表示设备的左右运动。

DeviceOrientationEvent.webkitCompassHeading 只读

一个表示设备绕世界系统 z 轴的运动与北方向之间的差异的数字，以度为单位，取值范围为 0 到 360。

DeviceOrientationEvent.webkitCompassAccuracy 只读

罗盘的精度，以正值或负值偏差表示。通常为 10。

示例

js
if (window.DeviceOrientationEvent) {
  window.addEventListener(
    "deviceorientation",
    (event) => {
      const rotateDegrees = event.alpha; // alpha: rotation around z-axis
      const leftToRight = event.gamma; // gamma: left to right
      const frontToBack = event.beta; // beta: front back motion

      handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    },
    true,
  );
}

const handleOrientationEvent = (frontToBack, leftToRight, rotateDegrees) => {
  // do something amazing
};

规范

规范
设备方向和运动
# deviceorientation
设备方向和运动
# ref-for-dom-window-ondeviceorientation

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅