使用 ngTouch 定义触摸事件的区域答案

【问题标题】：Define areas for touch events using ngTouch使用 ngTouch 定义触摸事件的区域
【发布时间】：2023-03-20 09:43:01
【问题描述】：

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

这将允许我设置其他滑动区域以获得附加功能，而不是仅限于一个区域。

我知道我可以创建一个 div 并将其放置在具有定义宽度和高度的位置，但该 div 会阻止其他区域的内容，因此当有人“点击”某些东西时，他们实际上会点击不可见的 div滑动区域。我知道必须有办法解决这个问题，但我想不出一个。

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

【问题讨论】：

标签： javascript html angularjs touch angularjs-ng-touch

【解决方案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);
     }
});

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

【讨论】：