JavaScript 事宜——“事宜范例”中“装备事宜”和“触摸与手势事宜”的注重要点

2019年8月30日 80次阅读 来源: JS菌

装备事宜

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还包括除鼠标事宜的属性以外别的两个属性：rotation和scale：个中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菌
    原文地址: https://segmentfault.com/a/1190000004332409
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞