使用ngTouch

Question

我正在开发一个AngularJs网络应用程序，刚刚开始使用ngTouch来识别向左和向右滑动，我想用它来打开和关闭我的侧栏菜单。目前它工作，菜单打开和关闭，但是，我将滑动事件绑定到整个包装器，如<div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()">，这使整个应用程序成为滑动区域。我希望能够将它设置为应用程序左上象限中的一个区域，如下所示：

这样我就可以设置其他滑动区域以获得更多功能，而不仅限于一个区域。

我知道我可以创建一个div并将其放置在定义的宽度和高度，但div将阻止其他区域的内容，以便当有人去＃34;点击＆＃34;他们实际上会点击滑动区域的隐形div。我知道必须有办法解决这个问题，但我想不出一个。

tldr：如何设置一个区域来捕获不会影响其下方其他元素交互的滑动事件？

Answer 1

在angular-touch的源代码中，它使用一个名为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);
     }
});

有点丑陋的黑客，但它会起作用。