JavaScript click（）破坏了Bootstrap按钮的单击动画

Question

我正在使用Bootstrap 4进行样式设置。我的页面上有一个按钮，希望用户能够通过击键来触发。

我添加了以下Javascript，它可以正常工作。

<script>

  document.addEventListener('keyup', function (event) {

    if (event.defaultPrevented) {

      return;

    }

    var key = event.key || event.keyCode;

    if (key === 'j' || key === 'KeyJ' || key === 74) {

      document.getElementById("myButton").click();

    }

});

</script>

HTML只是

<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>

它看起来就像Bootstrap设置的任何按钮一样。

问题。通常，当您按下按钮时，Bootstrap会在点击后播放一个小动画。但是，当单击由JavaScript触发时（即，用户使用了按键），则不会发生该动画，并且用户也不会收到有关单击按钮的事实的任何反馈。由于用户将主要通过击键来触发单击，因此，我确实希望该单击反馈可见。

我的代码破坏了Bootstrap动画，怎么了？是否有另一种方法可以让我像这里一样通过击键来触发按钮单击，但又不会破坏单击反馈动画？

CODEPEN：https : //codepen.io/anon/pen/byebxg 在Codepen演示中，您可以尝试将鼠标悬停在该按钮上，然后单击该按钮，然后观看Bootstrap动画的小片段（演示中没有任何作用）。由于JavaScript代码段的原因，您还可以通过按“ j”来“单击”它（我添加了警报以表明按键监听正在工作）。但是，以这种方式“单击”按钮时，不会显示按钮动画。即使单击是由JS脚本触发的，也可以使它播放吗？

Answer 1

这是用于显示处理的Loader用途-&nbsp; &nbsp;<button&nbsp; class="btn btn-success btn-lg" type="submit"&nbsp; id="load" data-loading-text="&nbsp;&nbsp; &nbsp;<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Button</button>JavaScript代码是-&nbsp; <script>&nbsp; &nbsp; &nbsp; $('.btn').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var $this = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$this.button('loading');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$this.button('reset');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, 8000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;</script>