Определите области для сенсорных событий, используя ngTouch

Question

Я работаю над веб-приложением AngularJs и только что начал использовать ngTouch для распознавания пролистывания влево и вправо. Я хочу использовать это для открытия и закрытия меню боковой панели. В настоящее время это работает, и меню открывается и закрывается, однако, у меня есть события смахивания, привязанные ко всей оболочке, вот так <div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()"> что делает все приложение областью смахивания. Я хотел бы иметь возможность установить его только на область в верхнем левом квадранте приложения, например, так:

Это позволит мне настроить другие области прокрутки для дополнительной функциональности, а не ограничиваться только одной областью.

Я знаю, что могу сделать div и поместить его туда с определенной шириной и высотой, но div будет блокировать содержимое в других областях, так что, когда кто-то "щелкает" что-то, он фактически щелкает невидимым 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);
     }
});

Вид некрасивого хака, но это сработает.