【问题标题】:How can I listen for a click-and-hold in AngularJS?如何在 AngularJS 中监听单击并按住?
【发布时间】:2014-09-30 13:35:01
【问题描述】:

我制作了一个计时器,您可以通过单击按钮来增加或减少时间。但是,我希望当我单击并按住按钮时,时间值会继续攀升。

所以目前,如果您每次单击向上按钮时看到我的Plunkr,值就会增加,但我希望这样,所以当我按住按钮时,值会增加1,2,3,4,5,6,7,8,直到我松开按钮。

我怎样才能实现这样的目标?

【问题讨论】:

    标签: javascript angularjs angularjs-directive


    【解决方案1】:

    DEMO

    <span class="time">{{ Time | timeFilter }}</span>
    <div class="btn-group btn-group-sm">
      <button class="btn btn-default" ng-mousedown='mouseDown()' ng-mouseup="mouseUp()">
        <i class="fa fa-caret-up"></i>
      </button>
      <button class="btn btn-default" ng-click="Time = Time - 1">
        <i class="fa fa-caret-down"></i>
      </button>
    </div>
    

    在 $interval 中使用 ng-mouseDown 和 ng-mouseup 指令

    app.directive('time', function ($interval) {
       return {
          templateUrl: 'time.html',
          restrict: 'E',
          scope: {
            Time: '=value'
          },
          link: function (scope, element, attrs) {
            element.addClass('time');
    
            var promise;      
            scope.mouseDown = function() {
              if(promise){
                 $interval.cancel(promise);
              }
              promise = $interval(function () { 
                scope.Time++;
              }, 100);
    
            };
    
            scope.mouseUp = function () {
               $interval.cancel(promise);
               promise = null;
            };
         }
      };
    });
    

    【讨论】:

    • 这是完美的感谢,只是一个简单的问题。 $interval 是否只是导致函数继续循环?
    • 是的,在本例中每 100 毫秒。
    • 如果在鼠标按钮按下时鼠标离开元素,当鼠标按钮返回时,间隔不会被取消。为了解决这个问题,您可以添加ng-mouseleave='mouseUp()'
    • 是否有解决方案可以通过触摸来做到这一点?我已经在联想移动设备上测试过,但不幸的是这不起作用。
    • 尝试触摸开始和触摸结束事件。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多