Preventing / dealing with double button clicks in angular

Question

In angular we can set up a button to send ajax requests like this in view:

... ng-click=\"button-click\"

and in controller:

Answer 1

I liked solution of user: zsong

But ng-dblclick="return false;" give a problem(I'm using Chrome Windows7) at js console you can see the error.

I can't comment (i don't have enough reputation to comment his solution)

Just use only ng-disabled.

As you can see at the plunker below if you have the two functions: ng-click and ng-dblclick And give a double click you will execute: 2 times click and 1 time dblclick

<bla ng-dblclick="count=count+1" ng-click="count=count+0.1" />

The double click gives you 1.2, so you can't prevent the 2 clicks with ng-dblclick, just add one more behavior when the second click happens.

Dblclick and click

Jonathan Palumbo gave an example with ng-disabled work at this thread.

Answer 2

A simple solution I found and I think is better than other answer here is preventing browser default behavior on mousedown event.

ng-mousedown="$event.preventDefault();"

It does NOT prevent click event but it prevents double-click event :)

Answer 3

to elaborate on @Jonathan Palumbo's answer (use ngDisabled) and @andre's question ("how to use that in a directive instead of controller?"): to allow the click or submission event to bubble up, you need to set the 'disabled' attribute to your clickable element (be it a button, a link, a span or a div) programmatically inside a timeout function (even with a delay of 0ms) which allows the event to be passed before its being disabled:

$timeout(function(){ elm.attr('disabled',true); }, 0);

I refer to @arun-p-johny's answer: prevent multiple form submissions using angular.js - disable form button.

Answer 4

You can create a directive to prevent double click:

angular.module('demo').directive('disableDoubleClick', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('click', function(){
                $timeout(function(){
                    elem.attr('disabled','disabled');
                }, 20);

                $timeout(function(){
                    elem.removeAttr('disabled');
                }, 500);
            });
        }
    };
});

and you can use it on any clickable item like this:

<button ng-click="clickMe()" disable-double-click >Click Me</button>

Answer 5

You can use a directive that I've just finished to prevent user from clicking multiple times on a element when performing an asynchronous action

https://github.com/mattiascaricato/angular-click-and-wait

---

You can add it into your project with npm or bower

npm install angular-click-and-wait

or

bower install angular-click-and-wait

Usage example

const myApp = angular.module('myApp', ['clickAndWait']);

myApp.controller('myCtrl', ($scope, $timeout) => {
  $scope.asyncAction = () => {
    // The following code simulates an async action
    return $timeout(() => angular.noop, 3000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdn.rawgit.com/mattiascaricato/angular-click-and-wait/master/dist/click-and-wait.js"></script>

<section ng-app="myApp">
  <div ng-controller="myCtrl">
    <button click-and-wait="asyncAction()">Click Me!</button>
  </div>
</section>

Note: The asynchronous action passed as argument should be a Promise

Answer 6

I just expanded on zsong's code to add a check in the handler for the flag. If its true then just return because a click is already being handled. This prevents double clicks without worrying about angular timing or that sort of thing.

$scope.flag = false;
$scope.buttonClicked = function() {
    if ($scope.flag) {
        return;
    }
    $scope.flag = true;
    Service.doService.then(function(){
        //this is the callback for success
        $scope.flag = false;
    }).error(function(){
        //this is the callback for the error
        $scope.flag = false;
    })
}