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

    });
};