我正在开发一个 AngularJs Web 应用程序,刚刚开始使用 ngTouch 来识别左右滑动,我想用它来打开和关闭我的侧边栏菜单。目前它可以工作,菜单打开和关闭,但是,我将滑动事件绑定(bind)到整个包装器,如下所示 <div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()">
这使得整个应用程序成为滑动区域。我希望能够将其设置为应用程序左上象限中的一个区域,如下所示:
这将允许我设置其他滑动区域以获得附加功能,而不是仅限于一个区域。
我知道我可以制作一个 div 并将其放置在定义的宽度和高度处,但是 div 会阻止其他区域中的内容,这样当有人“单击”某些内容时,他们实际上会单击不可见的 div滑动区域。我知道必须有办法解决这个问题,但我想不到。
tldr:如何设置一个区域来捕获滑动事件,并且不会影响其下方其他元素的交互性?
最佳答案
在 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);
}
});
有点丑陋,但它会起作用。
关于javascript - 使用 ngTouch 定义触摸事件区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37214897/