Javascript 如何避免双击不同的按钮？

我的问题不是双击同一个按钮，而是双击两个按钮

用户双击按钮

• 第一次单击由第一个按钮检测
• 控制器执行该操作
• 用户界面被刷新，另一个按钮显示在同一位置
• 第二次单击被第二个按钮捕捉 =>用户不希望单击第二个按钮

我怎样才能避免这种情况

我测试过：

• 在操作期间禁用所有UI按钮
  但是，如果动作真的很快，则在第二次单击之前启用按钮

• 不在UI中的同一位置放置两个按钮
  并非总是可能的，而且有了响应式用户界面，不可能管理所有案例

• 单击时添加全局时间戳，如果有500毫秒，则在第二次单击时进行测试

              _click: function(args)
              {
                  // to avoid double click user need wait 500ms between each click
                  if(window.paperbutton_timestamp)
                  {
                      var diff = new Date() - window.paperbutton_timestamp;                            
                      if(diff < 500)
                      {
                          window.paperbutton_timestamp = new Date();                        
                          return;
                      }
                  }
                  window.paperbutton_timestamp = new Date();                        
  
                  if(scope.click)
                  {
                      scope.click(args);
                  }
              },
  

  \单击：函数（args）
  {
  //为了避免双击，用户需要在每次单击之间等待500毫秒
  if（窗口纸张按钮\时间戳）
  {
  var diff=new Date（）-window.paperbutton\u时间戳；
  如果（差值<500）
  {
  window.paperbutton_timestamp=新日期（）；
  返回；
  }
  }
  window.paperbutton_timestamp=新日期（）；
  如果（范围。单击）
  {
  范围。单击（args）；
  }
  },
  

好的，这就行了

现在我的问题是我有很多量角器端到端测试，点击次数超过2000次。 一些量角器咔嗒声在500毫秒内完成

我可以有哪种解决方案？
1.每次单击后添加等待
（还有2000个等待手动添加）
2.在全局变量中设置500ms，并将该值覆盖为0ms
如何覆盖每个测试和每个页面刷新？
3.覆盖量角器点击？
Seam是更好的解决方案，但我不知道如何做到这一点

• 你还有更好的主意吗

---

这通常通过良好的老式人机交互解决。尝试使用一种对悬停、mousedown和mouseup事件做出视觉反应的按钮样式。这通常足以让用户理解双击是不必要的。Stackoverflow本身有一个很棒的例子：

IDLE按钮：

悬停按钮：

鼠标向下按钮：

鼠标按钮：

但是，如果您确实希望防止意外的点击，那么最好的方法可能是在操作期间禁用按钮，然后当您准备重新启用时，将此操作置于超时状态，这样禁用的按钮将持续更长的时间

另一项建议 您可以实现一个全局函数，在需要时生成一个覆盖整个屏幕的不可见的

div

。这将阻止屏幕上的一切工作

<div style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index: 10000"></div>

---

将它放在布局文件中，通常是

app.component.html

，并实现

*ngIf

，因为它仅在必要时显示。此外，它的<代码> Z-索引应该大于整个应用程序中任何其他元素的<代码> z索引< /代码>。

是否考虑使用*ngIF用于这两个按钮？ **

1
二

---

**

最好为量角器单击编写自定义函数：

protractor.ElementFinder.prototype.waitClick = function(wait){
  browser.sleep(wait);
  this.click();
};

describe('Tests', function() {
  element.all(by.css('#testElements')).get(0).waitClick(1000)
});

---

因为，不建议覆盖默认的单击功能。

您已将问题标记为，但该代码似乎不是组件中常见的类型脚本。请将从一个按钮切换到第二个按钮的动画设置为300ms，使其在此期间不可点击，并将超时设置为300ms？谢谢，但我的用户不明白在网上双击是不必要的。他们双击每一个地方。添加计时器以启用按钮的解决方案是正确的解决方案。但我们需要在任何地方实施这种麦加主义。我搜索了一个全球性的解决方案来避免开发ommit:）谢谢。了解您的用户非常重要。我现在添加了一个新建议，请注意我的编辑。：）谢谢Pedro，但是有了这个解决方案，我在e2e测试中总是遇到问题，如果有这个覆盖div，我就无法点击。这与我提出的解决方案大致相同。我搜索以覆盖量角器单击，我在此处看到一篇文章，但没有解决方案：）是，它是解决方案的一部分，具有[disable]=“window.viewDisable”，并在每次操作后设置500毫秒超时以设置window.viewDisable=false。需要是全局的，因为按钮在同一范围内不是必需的

protractor.ElementFinder.prototype.waitClick = function(wait){
  browser.sleep(wait);
  this.click();
};

describe('Tests', function() {
  element.all(by.css('#testElements')).get(0).waitClick(1000)
});