Я пытаюсь отобразить оверлей с некоторой информацией после длительного нажатия на элемент (для простоты сделал это обычным нажатием в примере).
После нажатия на этот оверлей он должен снова исчезнуть.
Это упрощенная версия того, чего я пытаюсь достичь.
https://plnkr.co/edit/qzU1Ah6ekCbljlWRpvI9?p=preview
var app = angular.module('myApp', []);
app.controller('ngClickCtrl', ["$scope", function ($scope) {
$scope.hasDetail=false;
$scope.hideDetail = function () {
$scope.hasDetail = false;
};
var element = document.getElementsByClassName("base")[0];
var passiveEventListenerOptions = {
passive: true,
once: false
};
element.addEventListener('touchstart',
handleStart,
passiveEventListenerOptions);
element.addEventListener('mousedown',
handleStart,
passiveEventListenerOptions);
function handleStart () {
$scope.hasDetail = true;
$scope.$applyAsync();
}
}]);
<div ng-controller="ngClickCtrl">
<div class="base" ng-click="handleStart()">Base</div>
<div ng-class="{'show-detail':hasDetail}" class="detail" ng-click="hideDetail()">Detail</div>
</div>
Он отлично работает на рабочем столе с помощью мыши, но после того, как я попробую на сенсорном устройстве или в режиме устройства инспектора, наложение сразу исчезает после отпускания.
Небольшое примечание: не двигайте пальцем или мышью во время тестирования, потому что это не воспроизведет проблему.