現在、クラス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;
}