如何禁用雙擊img標籤

我有一個刪除img，並點擊它將進行api調用並刪除記錄，但雙擊它正在進行多個api調用。我嘗試禁用雙擊使用ng-dblclick =「返回false;」但沒用。有人可以幫助我如何禁用使用角度js雙擊img標籤？如何禁用雙擊img標籤

PS：我已經看到這種做法正在div標籤

感謝

來源

2017-10-13 krishna teja

禁用點擊，直到你的記錄被刪除。 –

三重點擊呢？五次點擊？您需要在該圖像上設置一個標誌，以忽略除第一次點擊之外的所有標誌。 – tadman

@NikolajDamLarsen我發現即使ng-disabled也不起作用。 –

這裏是你如何能避免多個API調用的例子。它可能看起來不同於你的代碼，但由於你沒有提供任何代碼，這是我能做的最好的。

在您的控制器中，您將有一個變量，您在第一次點擊時設置爲true，並在API調用返回響應時設置爲false。每次執行API調用的函數時，都要檢查這個變量是否爲真。如果是這樣，您只需在再次進行API調用之前返回即可。這是代碼（我在這裏跳過最佳實踐，以保持樣本最小）：

angular.module('app').controller('myController', function($http){ 
    var ctrl = this; 
    ctrl.isDeleting = false; 

    ctrl.deleteRecord = function(id){ 
     if(ctrl.isDeleting){ 
      return; 
     } 

     ctrl.isDeleting = true; 
     $http.delete('[your_api_url]/' + id).finally(function(){ 
      ctrl.isDeleting = false; 
     }); 
    }; 
});

然後你的HTML應該是這樣的：

<img src="images/delete.png" ng-click="$ctrl.deleteRecord(id)" ng-class="{'img-disabled': $ctrl.isDeleting}" />

，並添加一些CSS視覺反饋給用戶：

.img-disabled { 
    cursor: default; 
    opacity: 0.5; 
}

就是這樣。

重申一下，我不知道你的代碼是怎麼樣的，所以我已經做出了一些假設，你在應用這個解決方案時必須考慮到。

來源

2017-10-13 20:08:47

我遵循相同的邏輯，但問題是我使用標記，所以我看到ng-disabled在標記上不起作用。 –

「ng-disabled」不是我樣本的重要組成部分。這僅僅是對用戶的視覺反饋。即使沒有它，使用上面的代碼你的API不會被調用兩次。你可以用'ng-class =「{'img-disabled'：$ ctrl.isDeleting}」'做類似的img標籤，並讓一些css使img看起來被禁用。我已經從示例中刪除了'ng-disabled'，以避免從我的答案的本質中分心。 –

非常感謝Nikolaj，它在這種方法下運作良好。 –

最簡單的辦法是：

<img src="Tulips.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled"></img> 

var app = angular.module('main', []). 
controller('DemoCtrl', function($scope, $filter) { 
$scope.isEnabled=true; 
});

來源

2017-10-14 07:50:33 KumarSandeepr

如何禁用雙擊img標籤

回答

相關問題