禁用除单击之外的所有锤.js(角度锤子)事件

Disabling all hammer.js (angular-hammer) events except single tap

本文关键字:js 事件 单击      更新时间:2023-09-26

我的应用程序使用角度锤子,我想仅针对点击事件对其进行优化,以获得最佳性能,因为我不需要任何其他手势。我知道 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'}
]" 
我知道

这是一个非常古老的问题,但是如果您只对Tap事件感兴趣,那么为什么不直接使用ng-click呢? 这是单击(或鼠标单击)。

听起来你真的可能根本不需要锤子。 如果你只需要一个简单的tap事件处理程序,也许可以使用Bob Nisco的onLongPress指令。 您只需要去除一些位即可仅获取您可能正在寻找的触摸敏感事件。

这是一个基于Bob Nisco工作的onTap指令的Plunk。仅当存在触摸事件(而不是鼠标单击)时,它才会触发分配的处理程序。 下面是应用、控制器和指令:

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>