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

});
};