javascript - 当我将 hidden-xs 按钮与 bootstrap (Angular) 一起使用时，单击两次按钮

Question

示例:

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

这是 Bootstrap 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 按钮一直都在同一个地方，并且都注册了 (click) 事件。甚至是看不见的按钮。

我只想要一次点击(或者只想要注册一个按钮点击的可见按钮)

Answer 1

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

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

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

当您删除那些隐藏/可见 类时，问题会更明显 - 因为动画具有相同的名称，您会看到单击一个按钮会切换两个按钮上的动画，从而调用他们每个人的动画回调。