AngularJS 单击元素并单击+按住 5 秒

Question

我有 div 元素，我需要捕获一次单击事件并单击并按住。

如果单击此 div，我应该在范围内调用函数 1，如果单击并按住（超过 5 秒）我应该在范围内调用函数 2。

Answer 1

创建指令 on-click-and-hold 并使用它。

指令

directive('onClickAndHold', function ($parse, $timeout) {
  return {
    link: function (scope, element, attrs) {
      var clickAndHoldFn = $parse(attrs.onClickAndHold);
      var doNotTriggerClick;
      var timeoutHandler;
      element.on('mousedown', function () {
          $timeout.cancel(timeoutHandler);
          timeoutHandler = $timeout(function () {
            clickAndHoldFn(scope, {$event: event})
          }, 5000)
      });
      element.on('mouseup', function (event) {
          $timeout.cancel(timeoutHandler);
      });

      if (attrs.onClick) {
          var clickFn = $parse(attrs.onClick);
          element.on('click', function (event) {
              if (doNotTriggerClick) {
                  doNotTriggerClick = false;
                  return;
              }
              clickFn(scope, {$event: event});
              scope.$apply();
          });
      }
    }
  }
})

标记

<div on-click-and-hold="f2()" on-click="f1()"></div>

控制器

controller('AppCtrl', function ($scope) {
    $scope.f1 = function () {
        console.warn('inside f1');
    }
    $scope.f2 = function () {
        console.warn('inside f2');
    }
})

如果您只想处理点击事件，请使用 ng-click 而不是 on-click-and-hold。

Working Plnkr

AngularJS 单击元素并单击+按住 5 秒

AngularJS one click on element and click+hold more 5 seconds

click

onclick

angularjs