Windows 8 “无法检测”；十字滑块“；元素可滚动时的手势

我目前正在尝试使用

Windows.UI.Input.gestureRecognitor

类在

div

上检测交叉滑动手势

我已经成功地实现了对这个手势的检测，除非元素位于可滚动区域

具体来说，当它位于可滚动区域时，我几乎在

MSPointerDown

事件之后立即收到

MSPointerCancel

事件——如果我缓慢移动触摸交互，我确实会看到一些

MSPointerMove

事件，但随后它会关闭并取消

深入研究

WinJS.UI.ListView

实现，我也在做同样的事情。这种行为确实有效，所以我不认为这是驾驶员或模拟器的问题

要查看此代码交叉滑动，请按如下方式更改CSS：

.container

：将

宽度：3000px

更改为

宽度：300px

示例代码

可以通过在VisualStudio中创建一个空白JavaScript应用程序并将代码粘贴到下面讨论的位置来测试此代码

JavaScript，Default.js的结尾

HTML，替换default.HTML中的正文

---

这是因为

-ms touch action

需要在特定的平移轴上进行“固定”，以便直接操作。因此，如果需要垂直交叉滑动（例如滑动手指），则需要确保要检测交叉滑动的元素具有

-ms touch action

设置为

pan-x

，以启用水平平移，而不是垂直平移。滚动条应将

-ms touch action

设置为

auto

（这将教会我在VS中查看intellisense，而不是查看文档；我知道这里有一些东西）

WinJS.Namespace.define("Sample", {
    Swiper: WinJS.Class.define(function (el, options) {
        this.element = el;
        WinJS.UI.setOptions(options);
        this.mouseUp = this.mouseUp.bind(this);
        this.keyPress = this.keyPress.bind(this);

        //el.addEventListener("mouseup", this.mouseUp, true);
        el.addEventListener("keypress", this.keyPress);

        // Gesture events
        this.pointerDown = this.pointerDown.bind(this);
        this.pointerMove = this.pointerMove.bind(this);
        this.pointerUp = this.pointerUp.bind(this);
        this.pointerCancel = this.pointerCancel.bind(this);

        el.addEventListener("MSPointerDown", this.pointerDown, true);
        el.addEventListener("MSPointerMove", this.pointerMove, true);
        el.addEventListener("MSPointerUp", this.pointerUp, true);
        el.addEventListener("MSPointerCancel", this.pointerCancel, true);
    }, {
        element: null,
        _recognizer: null,
        wasSelected: false,
        currentTarget: null,
        pointer: null,
        mouseUp: function (e) {
            if(!e) {
                return;
            }

            if(e.button !== Sample.Swiper.RIGHT_MOUSE) {
                return;
            }

            if (!WinJS.Utilities.hasClass(e.srcElement, "swipeable")) {
                return;
            }

            this._toggleSelection(e.srcElement);
        },
        keyPress: function (e) {
            if (!e) {
                return;
            }

            if (e.keyCode !== WinJS.Utilities.Key.space) {
                return;
            }

            if (!WinJS.Utilities.hasClass(e.srcElement, "swipeable")) {
                return;
            }

            this._toggleSelection(e.srcElement);
        },
        pointerDown: function (e) {
            console.log("Pointer: Down");
            if (!WinJS.Utilities.hasClass(e.srcElement, "swipeable")) {
                return;
            }

            var p = Windows.UI.Input.PointerPoint.getCurrentPoint(e.pointerId);
            var touch = (e.pointerType === Sample.Swiper.TOUCH);
            var pointerProperties = p.properties;
            this.pointer = e.pointerId;
            if (!touch) {
                this.mouseUp(e);
                return;
            }

            this.currentTarget = e.srcElement;
            window.proxy.msSetPointerCapture(p.pointerId);
            this._getRecognizer().processDownEvent(p);

            //e.stopImmediatePropagation();
            e.preventDefault();
        },
        pointerMove: function (e) {
            if (e.pointerId !== this.pointer) {
                return;
            }
            console.log("Pointer: Move");
            var ips = Windows.UI.Input.PointerPoint.getIntermediatePoints(e.pointerId);
            this._getRecognizer().processMoveEvents(ips);
            //e.stopImmediatePropagation();
        },
        pointerUp: function (e) {
            if (e.pointerId !== this.pointer) {
                return;
            }
            console.log("Pointer: Up");
            var p = Windows.UI.Input.PointerPoint.getCurrentPoint(e.pointerId);
            this._getRecognizer().processUpEvent(p);
            //e.stopImmediatePropagation();
        },
        pointerCancel: function (e) {
            if (e.pointerId !== this.pointer) {
                return;
            }

            console.log("Pointer: Canceled");
            this._getRecognizer().completeGesture();
            e.stopImmediatePropagation();
        },

        _toggleSelection: function (el) {
            WinJS.Utilities.toggleClass(el, "selected");
        },
        _getRecognizer: function () {
            if (this._recognizer) {
                return this._recognizer;
            }

            var gr = new Windows.UI.Input.GestureRecognizer();
            gr.showGestureFeedback = false;
            var thresholds = gr.crossSlideThresholds;
            thresholds.selectionStart = WinJS.UI._VERTICAL_SWIPE_SELECTION_THRESHOLD;
            thresholds.speedBumpStart = WinJS.UI._VERTICAL_SWIPE_SPEED_BUMP_START;
            thresholds.speedBumpEnd = WinJS.UI._VERTICAL_SWIPE_SPEED_BUMP_END;
            thresholds.rearrangeStart = null;

            gr.crossSlideThresholds = thresholds;
            gr.crossSlideHorizontally = false;
            var settings = Windows.UI.Input.GestureSettings;
            gr.gestureSettings = settings.crossSlide;
            gr.addEventListener("crosssliding", function (e) {
                var el = this.currentTarget || document.createElement("div");
                console.log("CrossSlide State: " + e.crossSlidingState);
                switch (e.crossSlidingState) {
                    case Windows.UI.Input.CrossSlidingState.selecting:
                        this.wasSelected = true;
                        break;

                    case Windows.UI.Input.CrossSlidingState.completed:
                        if (this.wasSelected) {
                            this._toggleSelection(this.currentTarget);
                        }
                        this.wasSelected = false;
                        this.currentTarget = false;
                        break;

                    default:
                        this.wasSelected = false;
                        break;
                }
            }.bind(this));
            gr.addEventListener("manipulationstarted", function (e) {
                debugger;
            });
            this._recognizer = gr;

            return gr;
        }
    }, {
        RIGHT_MOUSE: 2,
        TOUCH: 2,
    }),
});

<body>
    <div class="scroller" data-win-control="Sample.Swiper">
        <div id="proxy"></div>
        <div class="container">
            <div class="item swipeable"
                tabindex="0">
            </div>
        </div>
    </div>
</body>

.scroller {
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    -ms-touch-action: auto;
}
.container {
    width: 3000px;
    height: 100vh;
    display: -ms-grid;
    -ms-grid-columns: 1fr 100px 1fr;
    -ms-grid-rows: 1fr 100px 1fr;
}

.item {
    background-color: red;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
}

.selected {
    outline-color: white;
    outline-style: solid;
    outline-width: 3px;
}