禁用除单击之外的所有hammer.js（角锤）事件答案

【问题标题】：Disabling all hammer.js (angular-hammer) events except single tap禁用除单击之外的所有hammer.js（角锤）事件
【发布时间】：2014-11-26 00:09:06
【问题描述】：

我的应用使用angular-hammer，我只想针对 tap 事件对其进行优化，以获得最佳性能，因为我不需要任何其他手势。我了解hammer 只为指定的hm-* 选项添加侦听器，但我想明确阻止它侦听其他事件（特别是双击）。我不知道这是否有必要。（该应用程序在按钮按下时非常密集，我了解到这是跨 iOS 和 Android 混合开发的一个弱点；我想把它做好。）

我使用的参数如下，我在注释中的解释。这是一种好的做法吗？是我能做的最好的吗？

// do not propagate further events (like pan or swipe) from clicking this element
hm-manager-options="{'touchAction':'none'}"   

// disable double tap so it knows any tap is a single tap 
hm-recognizer-options="[
    {'type':'tap','event':'tap'}, 
    {'type':'dbltap','enabled':'false'}
]"

【问题讨论】：

标签： javascript ios cordova touch hammer.js

【解决方案1】：

我知道这是一个非常古老的问题，但是如果您只对 Tap 事件感兴趣，那么为什么不直接使用 ng-click 呢？即单击（或鼠标单击）。

听起来你真的可能根本不需要 Hammer。如果您只需要一个简单的点击事件处理程序，也许可以使用Bob Nisco's onLongPress directive。您只需要删除一些位即可仅获取您可能正在寻找的触敏事件。

Here's a Plunk that has an onTap directive 基于 Bob Nisco 的工作。只有在有触摸事件时才会触发分配的处理程序 - 不是鼠标点击。这是应用程序、控制器和指令：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.list = ['Item 1', 'Thing 2', 'Stuff part 3'];
  $scope.messages = ['No events yet'];
  $scope.name = 'World';

  $scope.myTapHandler = function(item) {
    $scope.messages.unshift('Tap: ' + item);
  }

});

app.directive('onTap', function($timeout) {
  return {
    restrict: 'A',
    link: function($scope, $elm, $attrs) {
      $elm.bind('touchend', function(evt) {
        // Prevent the onLongPress event from firing
        $scope.longPress = false;
        // If there is an on-touch-end function attached to this element, apply it
        if ($attrs.onTap) {
          $scope.$apply(function() {
            $scope.$eval($attrs.onTap)
          });
        }
      });
    }
  };
});

以下是重要的 HTML 位：

<body ng-controller="MainCtrl">
  <h3>Things to long-press</h3>
  <p ng-repeat="item in list" on-tap="myTapHandler(item)">
    [{{ item }}]
  </p>

  <h3>Messages (instead of console)</h3>
  <p ng-repeat="msg in messages">{{msg}}</p>
</body>

【讨论】：