angularjs - 快速单击 Bootstrap 删除图标两次会导致第一个删除周期中断

Question

快速点击 Bootstrap 删除图标两次会导致第一个删除周期中断，工具提示不会在鼠标移出时隐藏，并且很少有其他超链接和鼠标事件停止工作。

我在叠加层的列表中显示了一组联系人，每个联系人旁边都有一个 Bootstrap 删除图标，在鼠标悬停时显示工具提示。对于删除图标，我们既不使用button，也不使用 anchor 标记a，我们使用 Bootstrap 图标作为点击事件的链接。请建议如何为他们禁用第二次点击。快速单击删除图标两次，中断第一个删除周期，导致其他超链接(如删除图标和其他联系人记录上的工具提示)被禁用，所有其他鼠标事件被禁用，卡住删除图标(在鼠标悬停)并打开覆盖超链接图标。尝试了几个选项，例如:

• 使用 angular.element('.deleteIconClass').css('pointer-events','none'); 在第一次单击删除图标后显式停用行上的鼠标事件;并分别使用 angular.element('.deleteConfigIcon').css('pointer-events','auto'); 在 delete AJAX 调用成功或失败后激活行上的鼠标事件。
• 在叠加层上调用 Angular UI 网格刷新，以便隐藏保留的工具提示，并在悬停在每行的删除图标上时显示删除图标。
• 显式调用 mouseout 或 mouseleave 和 mouseover 或 mouseenter 事件分别隐藏和显示每行删除图标的工具提示。

以上都不能令人满意地工作。我在设计或编码中遗漏了什么吗？请让我知道是否需要任何其他信息，因为它是一个已经存在的代码。谢谢。

Answer 1

Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle

如果你的问题没有安静地捕获其余部分，但如果你试图阻止一个 Action 执行多个，你需要在点击时禁用它。

<button type="button" ng-click="clicked()" ng-disabled="hasClicked">click me</button>

$scope.clicked = function(){
     $scope.hasClicked = true;
     someLongTask()
          .finally(function(){
              $scope.hasClicked = false;
          });
}

您可以使用相同的方法禁用所有其他按钮。

如果您将 a 与 href 一起使用，您可能需要引用此指令以防止点击已禁用的 href (eatClickIf)。

https://gist.github.com/bcabanes/677305a013660ae7d55e