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秒

1 个答案: