1

私は AngularJs Web アプリに取り組んでおり、ngTouch を使用して左右のスワイプを認識し始めたばかりです。これを使用して、サイドバー メニューを開いたり閉じたりしたいと考えています。現在は機能し、メニューが開いたり閉じたりしますが、スワイプイベントがラッパー全体に関連付けられているため<div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()">、アプリ全体がスワイプエリアになります。次のように、アプリの左上の象限の領域だけに設定できるようにしたいと思います。 理想的なタッチエリアは赤

これにより、1 つの領域だけに限定されるのではなく、追加機能のために他のスワイプ領域を設定できるようになります。

div を作成し、定義された幅と高さでそこに配置できることはわかっていますが、div は他の領域のコンテンツをブロックするため、誰かが何かを「クリック」すると、スワイプ領域の非表示の div が実際にクリックされます。 . これを回避する方法が必要であることはわかっていますが、思いつきません。

tldr: その下にある可能性のある他の要素の対話性に影響を与えないスワイプ イベントをキャプチャする領域を設定するにはどうすればよいですか?

4

1 に答える 1

1

angular-touch のソースでは、bind という関数を使用しています。Bind は、スワイプを監視する必要がある要素を受け取り、そのイベント (開始など) を監視します。そのため、必要に応じて、開始点が設定した x または y 座標の外側にある場合、残りのコードの実行を停止するようにソースを変更できます。

このコードを変更できます。

pointerTypes = pointerTypes || ['mouse', 'touch'];
element.on(getEvents(pointerTypes, 'start'), function(event) {
     startCoords = getCoordinates(event);
     active = true;
     totalX = 0;
     totalY = 0;
     lastPos = startCoords;
     eventHandlers['start'] && eventHandlers['start'](startCoords, event);
});

このようなものに：

pointerTypes = pointerTypes || ['mouse', 'touch'];
element.on(getEvents(pointerTypes, 'start'), function(event) {
     startCoords = getCoordinates(event);
     if (startCoords.y <= 400 && startCoords.y >= 100 && startCoords.x <=500) {
         active = true;
         totalX = 0;
         totalY = 0;
         lastPos = startCoords;
         eventHandlers['start'] && eventHandlers['start'](startCoords, event);
     }
});

ちょっと醜いハックですが、うまくいきます。

于 2016-05-13T18:51:23.253 に答える