Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案

有些需求中，需要一个元素上既有双击事件，也有单击事件，而两者实现的效果不一样。

这时可以使用ng-dblclick与ng-click来实现需求，但是要避免浏览器将双击事件误认为是两次单击事件，从而出现逻辑错误。

可以通过$timeout进行判断，取消第二次单击事件的执行。

<img src="myImage.jpg" ng-click="singleClick()" ng-dblclick="doubleClick()">

In your controller the singleClick function will look like:

$scope.singleClick = function () {

    if ($scope.clicked) {

        $scope.cancelClick = true;

        return;

    }

    $scope.clicked = true;

    $timeout(function () {

        if ($scope.cancelClick) {

            $scope.cancelClick = false;

            $scope.clicked = false;

            return;

        }

        //do something with your single click here

        //clean up

        $scope.cancelClick = false;

        $scope.clicked = false;

    }, 500);

};

And the doubleClick function will look normal:

$scope.doubleClick = function () {

    $timeout(function () {

        //do something with your double click here

    });

};