Preventing all hammer.js (angular-hammer) interactions except for single taps

Question

Preventing all hammer.js (angular-hammer) interactions except for single taps

Utilizing the angular-hammer module in my app, I am keen on refining its performance specifically for the tap event. Given that no other gestures are required, I aim to enhance efficiency by excluding unnecessary listening functions, such as double tap. As my application heavily relies on button interactions, particularly on iOS and Android platforms, I strive for optimal implementation.

Below are the arguments I have incorporated, along with annotations detailing their significance. Is this approach considered best practice?

// Prevent propagation of additional events when clicking this element
hm-manager-options="{'touchAction':'none'}"   

// Disable double tap to interpret all taps as single tap gestures 
hm-recognizer-options="[
    {'type':'tap','event':'tap'}, 
    {'type':'dbltap','enabled':'false'}
]"

javascript ios cordova touch hammer.js

Answer 1

Answer №1

While this question may be old, if your focus is solely on the Tap event, consider using ng-click instead. It functions as a single-tap (or mouse click).

It seems that Hammer may not be necessary for your needs. Bob Nisco's onLongPress directive could provide a simple tap event handler without all the additional Hammer features.

Check out this Plunk example with an onTap directive based on Bob Nisco's work. It triggers the assigned handler only upon touch events, excluding mouse clicks. Here are the app, controller, and directive:

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;
        // Execute attached on-touch-end function if present
        if ($attrs.onTap) {
          $scope.$apply(function() {
            $scope.$eval($attrs.onTap)
          });
        }
      });
    }
  };
});

Here are the key HTML elements:

<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>

Answer 2

While this question may be old, if your focus is solely on the Tap event, consider using ng-click instead. It functions as a single-tap (or mouse click).

It seems that Hammer may not be necessary for your needs. Bob Nisco's onLongPress directive could provide a simple tap event handler without all the additional Hammer features.

Check out this Plunk example with an onTap directive based on Bob Nisco's work. It triggers the assigned handler only upon touch events, excluding mouse clicks. Here are the app, controller, and directive:

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;
        // Execute attached on-touch-end function if present
        if ($attrs.onTap) {
          $scope.$apply(function() {
            $scope.$eval($attrs.onTap)
          });
        }
      });
    }
  };
});

Here are the key HTML elements:

<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>

Preventing all hammer.js (angular-hammer) interactions except for single taps

Answer №1

Similar questions

Animating numerous elements simultaneously during Vue component rendering

Is the JSON object sent over an AJAX call getting corrupted during a POST request?

JavaScript query-string encoding

Guide on implementing a personalized 'editComponent' feature in material-table

"IOS exclusive: Encounter INVALID_STATE_ERROR on IOS devices only, not on Android, OSX, or Windows platforms

Strange response received from $http GET request on Android device running Crosswalk

obtain the present date using JavaScript

Obtain a specific element in Puppeteer JS by utilizing the waitForSelector function to detect when its class name changes

Issue with bouncing dropdown menu

discovering the category for the .click function

Utilizing Font Awesome for social icons in a Vue component display

several javascript onclick event listeners for manipulating the DOM

Obtain information using AJAX calls with jQuery Flot

When additional elements follow, the button ceases to function properly in JavaScript

The function "classList.add" does not successfully add a class to both a div and form elements

insert information into a fixed-size array using JavaScript

Using Swift for iOS development, create a LineChart that dynamically changes colors based on the

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

What is the best approach to storing and retrieving special characters ('+<>$") from a textfield into a database using PHP?

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent