我目前正在尝试div使用Windows.UI.Input.GestureRecognizer该类检测交叉滑动手势。
我已经能够成功实现对这个手势的检测，除非元素处于可滚动区域中。
具体来说，当它位于可滚动区域时，我MSPointerCancel几乎会在事件发生后立即收到一个MSPointerDown事件——如果我缓慢移动触摸交互，我确实会看到一些 MSPointerMove事件，但随后它会关闭并取消它。
深入研究WinJS.UI.ListView实现，我几乎在做同样的事情。这种行为确实有效，所以我不认为这是驱动程序或模拟器的问题。
要查看此代码交叉滑动，请按如下方式更改 CSS：
.container:width: 3000px改为width: 300px
示例代码
可以通过在 Visual Studio 中创建一个空白 JavaScript 应用程序并将代码粘贴到下面讨论的位置来测试此代码。
JavaScript，Default.js 的结尾
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,
}),
});
HTML，替换 default.html 中的正文
<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>
CSS，添加到 default.css
.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;
}