当我使用带引导程序的 hidden-xs 按钮时获得两次按钮点击（Angular）答案

【问题标题】：Getting two button clicks when I use a hidden-xs button with bootstrap (Angular)当我使用带引导程序的 hidden-xs 按钮时获得两次按钮点击（Angular）
【发布时间】：2018-04-06 10:29:09
【问题描述】：

此处示例：

https://embed.plnkr.co/TGPRooggnDNO4FEiWmXb/

这里是引导 HTML

<button type="button" class="btn btn-default hidden-xs" (click)="voteUp()" style="margin-top:5px; margin-right:5px; margin-left: 5px;">Vote up&nbsp;
  <span class="glyphicon glyphicon-arrow-up" [@upArrowState]="upArrowState" (@upArrowState.done)="upArrowAnimationDone($event, post, true)"></span>
</button>

<button type="button" class="btn btn-default visible-xs btn-vote" (click)="voteUp()">
  <span class="glyphicon glyphicon-arrow-up" style="left: -2px" [@upArrowState]="upArrowState" (@upArrowState.done)="upArrowAnimationDone($event, post, true)"></span>
</button>

所以我假设 hidden-xs 按钮和 visible-xs 按钮一直都在同一个地方，并且都注册了（点击）事件。即使是看不见的按钮。

我只想要一次单击（或者只需要可见按钮来注册按钮单击）

【问题讨论】：

标签： javascript html twitter-bootstrap angular click

【解决方案1】：

点击处理程序只被调用一次，如果将console.log 移动到voteUp() 处理程序，您可以看到。这个问题与动画有关。

我认为您绝对应该将逻辑（this.vote() 调用）移到那里，而不是动画回调。

其他可能性可能是只使用一次(@upArrowState.done)="upArrowAnimationDone($event, post, true)"，而不是在两个按钮上。

当您删除那些hidden/visible 类时，问题更明显 - 由于动画具有相同的名称，您将看到单击一个按钮将切换它们的动画，从而为它们中的每一个调用动画回调.

【讨论】：