javascript七基础学习系列二千二百四十七:devicemotion 事件

DeviceOrientationEvent 规范也定义了devicemotion 事件。这个事件用于提示设备实际上在移动,
而不仅仅是改变了朝向。例如,devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的
人手里。
当devicemotion 事件触发时,event 对象中包含如下额外的属性。
 acceleration:对象,包含x、y 和z 属性,反映不考虑重力情况下各个维度的加速信息。
 accelerationIncludingGravity:对象,包含x、y 和z 属性,反映各个维度的加速信息,
包含z 轴自然重力加速度。
 interval:毫秒,距离下次触发devicemotion 事件的时间。此值在事件之间应为常量。
 rotationRate:对象,包含alpha、beta 和gamma 属性,表示设备朝向。
如果无法提供acceleration、accelerationIncludingGravity 和rotationRate 信息,则
属性值为null。为此,在使用这些属性前必须先检测它们的值是否为null。比如:
window.addEventListener(“devicemotion”, (event) => {
let output = document.getElementById(“output”);
if (event.rotationRate !== null) {
output.innerHTML += Alpha=${event.rotationRate.alpha} +
Beta=${event.rotationRate.beta} +
Gamma=${event.rotationRate.gamma};
}
});
触摸及手势事件
Safari 为iOS 定制了一些专有事件,以方便开发者。因为iOS 设备没有鼠标和键盘,所以常规的鼠
标和键盘事件不足以创建具有完整交互能力的
网页。同时,WebKit 也为Android 定制了很多专有事件,
成为了事实标准,并被纳入W3C 的Touch Events 规范。本节介绍的事件只适用于触屏设备。

  1. 触摸事件
    iPhone 3G 发布时,iOS 2.0 内置了新版本的Safari。这个新的移动Safari 支持一些与触摸交互有关的
    新事件。后来的Android 浏览器也实现了同样的事件。当手指放在屏幕上、在屏幕上滑动或从屏幕移开
    时,触摸事件即会触发。触摸事件有如下几种。
     touchstart:手指放到屏幕上时触发(即使有一个手指已经放在了屏幕上)。
     touchmove:手指在屏幕上滑动时连续触发。在这个事件中调用preventDefault()可以阻止
    滚动。
     touchend:手指从屏幕上移开时触发。
     touchcancel:系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
    这些事件都会冒泡,也都可以被取消。尽管触摸事件不属于DOM 规范,但浏览器仍然以兼容DOM
    的方式实现了它们。因此,每个触摸事件的event 对象都提供了鼠标事件的公共属性:bubbles、
    cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、
    ctrlKey 和metaKey。
    除了这些公共的DOM 属性,触摸事件还提供了以下3 个属性用于跟踪触点。
     touches:Touch 对象的数组,表示当前屏幕上的每个触点。
     targetTouches:Touch 对象的数组,表示特定于事件目标的触点。
     changedTouches:Touch 对象的数组,表示自上次用户动作之后变化的触点。
    每个Touch 对象都包含下列属性。
     clientX:触点在视口中的x 坐标。
     clientY:触点在视口中的y 坐标。
     identifier:触点ID。
     pageX:触点在页面上的x 坐标。
     pageY:触点在页面上的y 坐标。
     screenX:触点在屏幕上的x 坐标。
     screenY:触点在屏幕上的y 坐标。
     target:触摸事件的事件目标。
    这些属性可用于追踪屏幕上的触摸轨迹。例如:
    function handleTouchEvent(event) {
    // 只针对一个触点
    if (event.touches.length == 1) {
    let output = document.getElementById(“output”);
    switch(event.type) {
    case “touchstart”:
    output.innerHTML += <br>Touch started: +
    (${event.touches[0].clientX} +
    ${event.touches[0].clientY});
    break;
    case “touchend”:
    output.innerHTML += <br>Touch ended: +
    (${event.changedTouches[0].clientX} +
    ${event.changedTouches[0].clientY});
    break;
    case “touchmove”:
    event.preventDefault(); // 阻止滚动
    output.innerHTML += <br>Touch moved: +
    (${event.changedTouches[0].clientX} +
    ${event.changedTouches[0].clientY});
    break;
    }
    }
    }
    document.addEventListener(“touchstart”, handleTouchEvent);
    document.addEventListener(“touchend”, handleTouchEvent);
    document.addEventListener(“touchmove”, handleTouchEvent);
    以上代码会追踪屏幕上的一个触点。为简单起见,代码只会在屏幕有一个触点时输出信息。在
    touchstart 事件触发时,触点的位置信息会输出到output 元素中。在touchmove 事件触发时,会
    取消默认行为以阻止滚动(移动触点通常会滚动页面),并输出变化的触点信息。在touchend 事件触
    发时,会输出触点最后的信息。注意,touchend 事件触发时touches 集合中什么也没有,这是因为
    没有滚动的触点了。此时必须使用changedTouches 集合。
    这些事件会在文档的所有元素上触发,因此可以分别控制页面的不同部分。当手指点触屏幕上的元
    素时,依次会发生如下事件(包括鼠标事件):
    (1) touchstart
    (2) mouseover
    (3) mousemove(1 次)
    (4) mousedown
    (5) mouseup
    (6) click
    (7) touchend
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值