4

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

理论上,IE10 中的手指计数可以为每个事件 +1MSPointerDown和 -1MSPointerUp事件(和/或使用 event.msPointerId 匹配的手指)。

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

也许使用 MSGesture 事件来查看是否有多个手指向下?(我尝试了这个但收效甚微,但也许其他人已经解决了它)。

有任何想法吗?

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

4

1 回答 1

2

确保您还跟踪 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;
    }
});
于 2013-02-08T04:31:22.943 回答