CODEWITHSUNDEEP
javascriptjqueryangularjseventsjquery-events
Shannon Hochkins
Shannon Hochkins

Reputation: 12186

why are Angular events are being delayed on devices?

On my mobile, when I click/touch on an element, that fires a certain process on the scope, and has to update it it all works fine, however if I want to repeat the event immediately this doesn't work using the standard .on('click') binder in jqLite/jQuery.

There's a definite delay between the two when you touch the containers.

var myApp = angular.module('myApp', ['ngTouch']);

myApp.controller('myCtrl', function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.counter = 0;
    $scope.fire = function() {
        $scope.counter++;
    }; 
});


myApp.directive('directiveA', function() {
    return {
      restrict: 'A',
      link : function(scope, element) {
        scope.counterB = 0;
        $(element).on('click', function() {
            scope.counterB++;
            scope.$digest();
        });
     }
  };
});

DEMO: http://jsfiddle.net/HB7LU/21162/

In the demo, if you touch on one side of the red bar and then the other side, no matter how fast you touch it, it updates.

However on the green bar, if you touch the left side and then the right side it doesn't update as you keep touching.

The Red bar is using the ng-click directive, and the green bar is using a standard on click binder, and then running a digest from that scope chain down.

Angulars ngTouch module is what's causing this delay. I'm wondering how I can overwrite this delay that comes through ngClick by using ngTouch?

Upvotes: 0

Views: 304

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

If you look at the documentation for ng-click, you can see that there is a 300ms delay between the tap/release and the triggering of click event, but the ng-click event does not use the default click to trigger the handler so there is no delay, but when you use the manual click event binding the delay is coming to picture.

A more powerful replacement for the default ngClick designed to be used on touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event. This version handles them immediately, and then prevents the following click event from propagating.

Upvotes: 1

Related Questions