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

因此，在研究了這一點之后，我假設您正在談論的動畫是邊框的增加，對嗎？

如果是這種情況，則可以通過將“ focus”類應用於元素來自定義構建效果。

.... 
 var key = event.key || event.keyCode;
    if (key === 'j' || key === 'KeyJ' || key === 74) {
      var b = document.getElementById("myButton");
      b.classList.add('focus');
      b.click();
    }
....

注意：-請確保刪除keydown上的focus類，以使該動畫具有某種感覺。 可以通過b.classList.remove('focus')

Answer 2

這是Loader用於表演處理的-

   <button  class="btn btn-success btn-lg" type="submit"  id="load" data-loading-text=" 
   <i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Button</button>

JavaScript代碼是-

  <script>
      $('.btn').on('click', function() {
         var $this = $(this);
           $this.button('loading');
              setTimeout(function() {
                     $this.button('reset');
                         }, 8000);
               });
   </script>

Answer 3

Bootstrap使用JavaScript在其某些組件中處理諸如動畫之類的事情，例如漢堡菜單切換，但在本例中的某些組件（如本例中的按鈕）中，Bootstrap使用CSS通過簡單的CSS動畫對組件進行動畫處理， CSS關鍵幀和變換等。

因此，在您的情況下，由於您是間接分派click事件，因此這些事件稱為合成事件，而不是由瀏覽器本身觸發的事件。

這樣，您可以更好地控制對這些單擊事件的反應，因此，在您的情況下，您需要添加Bootstrap focus類，以使按鈕組件具有小輪廓動畫。

 document.addEventListener('keyup', function(event) { if (event.defaultPrevented) { return; } let key = event.key || event.keyCode; let hotkeys = ['j', 'KeyJ', 74]; if (hotkeys.includes(key)) { let elm = document.getElementById("myButton"); elm.classList.toggle('focus'); } }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button> 

然后，您可以使用toggle方法，直接在瀏覽器中或通過鍵盤單擊按鈕后，在不存在的情況下添加類focus在不存在的情況下將其刪除。

您可以在Bootstrap CSS源代碼中搜索“ focus ”一詞，以了解將類附加到按鈕組件時它實際上的作用。

Answer 4

  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").style.background = 'lightgreen'; document.getElementById("myButton").click(); } }); document.addEventListener('keydown', function (event) { if (event.defaultPrevented) { return; } var key = event.key || event.keyCode; if (key === 'j' || key === 'KeyJ' || key === 74) { document.getElementById("myButton").style.background = 'green'; } }); 

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

在鍵入時，您的按鈕顏色正在改變，並且您的單擊也起作用。