javascript – 如何判断只有一个手指触摸Microsoft IE10

我们正在模拟无限列表的滚动,我们希望检测单个手指滚动或用户开始手势之间的差异.

理论上,对于每个MSPointerDown,可以将IE10中的手指数量保持为1,对于MSPointerUp事件(和/或使用event.msPointerId的匹配手指),可以保持-1的手指数.

在实践中,至少有一个错误,其中IE10将生成MSPointerDown事件但从未发送匹配的MSPointerUp事件. (对不起,我无法创建一个简单的测试用例来展示这个,但我确实花了很多时间检查MSPointerUp事件肯定是丢失的.可能是因为在触摸过程中删除了子元素).

也许使用MSGesture事件来查看多个手指是否已关闭？ (我试过这个但收效甚微,但也许其他人已经解决了这个问题).

有任何想法吗？

PS：在webkit中,相当于在touchstart事件中检查event.touches.length === 1(请注意,您需要一个不明显的技巧才能使其工作：document.ontouchstart必须注册一个事件,然后是event.touches.对于在其他元素上注册的touchstart事件,长度将是正确的).

解决方法:

确保您还跟踪MSPointerOut.我发现如果你在可跟踪区域外放开屏幕,将不会调用MSPointerUp.

如果它有帮助,我有一个WinJS类我一直用来跟踪多点触控状态.

var TouchState = WinJS.Class.define(
function () {
    this.pointers = [];
    this.primaryPointerId = 0;

    this.touchzones = [];
}, {
    touchHandler: function (eventType, e) {
        if (eventType == "MSPointerDown") {
            if (!this.pointers[this.primaryPointerId] || !this.pointers[this.primaryPointerId].touching) {
                this.primaryPointerId = e.pointerId;
            }
            e.target.msSetPointerCapture(e.pointerId);
            this.pointers[e.pointerId] = {
                touching: true,
                coords: {
                    x: e.currentPoint.rawPosition.x,
                    y: e.currentPoint.rawPosition.y
                }
            };
            this.checkTouchZones(this.pointers[e.pointerId].coords.x, this.pointers[e.pointerId].coords.y, e);
        }
        else if (eventType == "MSPointerMove") {
            if (this.pointers[e.pointerId]) {
                this.pointers[e.pointerId].coords.x = e.currentPoint.rawPosition.x;
                this.pointers[e.pointerId].coords.y = e.currentPoint.rawPosition.y;
            }
        }
        else if (eventType == "MSPointerUp") {
            if (this.pointers[e.pointerId]) {
                this.pointers[e.pointerId].touching = false;
                this.pointers[e.pointerId].coords.x = e.currentPoint.rawPosition.x;
                this.pointers[e.pointerId].coords.y = e.currentPoint.rawPosition.y;                    
            }
        }
        else if (eventType == "MSPointerOut") {
            if (this.pointers[e.pointerId]) {
                this.pointers[e.pointerId].touching = false;
                this.pointers[e.pointerId].coords.x = e.currentPoint.rawPosition.x;
                this.pointers[e.pointerId].coords.y = e.currentPoint.rawPosition.y;
            }
        }
    },
    checkTouchZones: function (x, y, e) {
        for (var zoneIndex in this.touchzones) {
            var zone = this.touchzones[zoneIndex];
            if (x >= zone.hitzone.x1 && x < zone.hitzone.x2 && y > zone.hitzone.y1 && y < zone.hitzone.y2) {
                zone.callback(e);
            }
        }
    },
    addTouchZone: function (id, hitzone, callback) {
        this.touchzones[id] = {
            hitzone: hitzone,
            callback: callback
        };
    },
    removeTouchZone: function (id) {
        this.touchzones[id] = null;
    }
});

标签：javascript,internet-explorer-10,touch
来源： https://codeday.me/bug/20190703/1371552.html