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

这时可以使用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 });
};
04-03 05:01