如何使用 Angular 指令处理单个 HTML 元素上的多个触摸事件

Posted 2023-02-24

【中文标题】如何使用 Angular 指令处理单个 HTML 元素上的多个触摸事件

【英文标题】：How to handle multiple touch events on a single HTML element using Angular directives

【发布时间】：2013-02-18 02:08:44

【问题描述】：

在我的移动应用程序中，我在主视图中以 html 格式显示内容：

<div class="imageView" na-swipe="next()" na-tap="showControls()"> content here </div>

为了使用 jQuery（或 Hammer.js）处理 swipe 和 touch 事件，我创建了这两个指令：

angular.module("naModule").directive 'naTap', ->
  (scope, element, attrs) ->
    tapping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> tapping = false
    element.bind 'touchend', -> scope.$apply(attrs['naTap']) if tapping

angular.module("naModule").directive 'naSwipe', ->
  (scope, element, attrs) ->
    tapping = false
    swiping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> swiping = true
    element.bind 'touchend',  -> scope.$apply(attrs['naSwipe']) if (swiping and tapping)

naSwipe 似乎运行良好，即每当执行滑动时都会调用next()...但是，当我点击next() 和showControls() 时都在触发... 怎么做我在这个 div 上干净地分开触摸和滑动？ 谢谢。

【参考方案1】：

我认为您以错误的方式处理您的用例。

考虑使用一个指令，模板是您描述的标记，并在该指令的 link() 函数中定义要捕获的事件。

类似于以下指令：

angular.module('naModule').directive('imageView', function() 
    return 
        restrict: 'E',
        replace: true,
        scope: 
            // As required for your content ...
        ,
        template: '<div class="imageView"> content here </div>',
        controller: function($scope, $attrs) 
            $scope.next = function() 
                // handle function..
            

            $scope.showControls = function() 
                // handle function..
            
        ,
        link: function(scope, element, attrs, controller) 
            element.bind('touchstart', function(e) 
                scope.tapping = true;
                scope.swiping = true;
            

            element.bind('touchmove', function(e) 
                scope.tapping = false;
                scope.swiping = true;
            

            element.bind('touchend', function(e) 
                if(scope.tapping) 
                    scope.next();
                 else 
                    scope.showControls();
                
            
        
    
);

【参考方案2】：

在某个地方，您需要将 swiping 重置为 false。这可能应该作为 touchstart 回调的一部分来完成。