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

    });
};

 

转载于:https://www.cnblogs.com/xiaxianfei/p/5729504.html