ngTouchを使用してタッチイベントの領域を定義する

Question

AngularJs Webアプリケーションを使用していて、ngTouchを使用して左右にスワイプを認識し始めたばかりです。サイドバーメニューを開いて閉じるためにこれを使用します。現在は動作していますが、メニューが開いたり閉じたりしますが、スワイプイベントはラッパー全体に結び付けられていますので、<div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()">のようにアプリケーション全体をスワイプエリアにします。私はアプリの左上隅の領域に設定できるようにしたいと考えています：

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

私はdivを作成してそこに定義された幅と高さを置くことができると知っていますが、divは他の領域のコンテンツをブロックするので、誰かが「クリック」して実際には不可視divスワイプ領域の場合私はこれを回避する方法がなければならないことを知っていますが、私はそれを考えることはできません。

tldr：スワイプイベントをキャプチャする領域を設定して、その下にある他の要素のインタラクティビティに影響を与えないようにするにはどうすればよいですか？

Answer 1

アングルタッチのソースでは、bindという関数を使用します。 Bindは、スワイプのために監視されるべき要素をとり、startなどのイベントを監視します。したがって、もしあなたが望むのであれば、あなたが設定したいくつかの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); 
    } 
}); 

種類が、それは動作します。