Window:deviceorientation 事件
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
deviceorientation
事件在方向传感器输出新数据的时候触发。其数据系传感器与地球坐标系相比较所得,也就是说在设备上可能会采用设备地磁计的数据。
参见有关方向与运动信息的说明。
该事件不可取消也不会冒泡。
语法
在 addEventListener()
方法中使用事件名称,或使用事件处理器属性。
js
addEventListener("deviceorientation", (event) => {});
ondeviceorientation = (event) => {};
事件类型
一个 DeviceOrientationEvent
。继承了 Event
。
事件属性
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",
function (event) {
// alpha: rotation around z-axis
var rotateDegrees = event.alpha;
// gamma: left to right
var leftToRight = event.gamma;
// beta: front back motion
var frontToBack = event.beta;
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
},
true,
);
}
var handleOrientationEvent = function (
frontToBack,
leftToRight,
rotateDegrees,
) {
// do something amazing
};
规范
Specification |
---|
Device Orientation and Motion # deviceorientation |
Device Orientation and Motion # ref-for-dom-window-ondeviceorientation |
浏览器兼容性
BCD tables only load in the browser