如何判断 Microsoft IE10 中是否只有一根手指触摸答案

【问题标题】：How to tell if only one finger touching in Microsoft IE10如何判断 Microsoft IE10 中是否只有一根手指触摸
【发布时间】：2013-01-23 18:35:22
【问题描述】：

我们正在模拟无限列表的滚动，我们希望检测单指滚动或用户开始手势之间的区别。

理论上，对于每个MSPointerDown 和/或使用 event.msPointerId 匹配的手指，IE10 中的手指计数可以减少 +1 和 MSPointerUp 的 -1。

在实践中，至少存在一个错误，即 IE10 会生成 MSPointerDown 事件，但永远不会发送匹配的 MSPointerUp 事件。（抱歉，我无法创建一个简单的测试用例来展示这一点，但我确实花了很多时间检查 MSPointerUp 事件是否肯定丢失。可能是由于删除了子元素在触摸期间）。

也许使用 MSGesture 事件来查看是否有多个手指按下？（我试过这个没有成功，但也许其他人已经解决了）。

有什么想法吗？

PS：在 webkit 中，等效于在 touchstart 事件中检查 event.touches.length === 1（请注意，您需要一个不明显的技巧才能使其正常工作：document.ontouchstart 必须注册一个事件，然后 event.touches.length 将是对在 other 元素上注册的 touchstart 事件更正）。

【问题讨论】：

标签： javascript touch internet-explorer-10

【解决方案1】：

确保您也在跟踪 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;
    }
});

【讨论】：

谢谢。我得试试。