第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

JavaScript click()破壞了Bootstrap按鈕的單擊動(dòng)畫

JavaScript click()破壞了Bootstrap按鈕的單擊動(dòng)畫

眼眸繁星 2021-05-11 17:14:45
我正在使用Bootstrap 4進(jìn)行樣式設(shè)置。我的頁(yè)面上有一個(gè)按鈕,希望用戶能夠通過(guò)擊鍵來(lái)觸發(fā)。我添加了以下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>它看起來(lái)就像Bootstrap設(shè)置的任何按鈕一樣。問(wèn)題。通常,當(dāng)您按下按鈕時(shí),Bootstrap會(huì)在點(diǎn)擊后播放一個(gè)小動(dòng)畫。但是,當(dāng)單擊由JavaScript觸發(fā)時(shí)(即,用戶使用了按鍵),則不會(huì)發(fā)生該動(dòng)畫,并且用戶也不會(huì)收到有關(guān)單擊按鈕的事實(shí)的任何反饋。由于用戶將主要通過(guò)擊鍵來(lái)觸發(fā)單擊,因此,我確實(shí)希望該單擊反饋可見(jiàn)。我的代碼破壞了Bootstrap動(dòng)畫,怎么了?是否有另一種方法可以讓我像這里一樣通過(guò)擊鍵來(lái)觸發(fā)按鈕單擊,但又不會(huì)破壞單擊反饋動(dòng)畫?CODEPEN:https : //codepen.io/anon/pen/byebxg 在Codepen演示中,您可以嘗試將鼠標(biāo)懸停在該按鈕上,然后單擊該按鈕,然后觀看Bootstrap動(dòng)畫的小片段(演示中沒(méi)有任何作用)。由于JavaScript代碼段的原因,您還可以通過(guò)按“ j”來(lái)“單擊”它(我添加了警報(bào)以表明按鍵監(jiān)聽(tīng)正在工作)。但是,以這種方式“單擊”按鈕時(shí),不會(huì)顯示按鈕動(dòng)畫。即使單擊是由JS腳本觸發(fā)的,也可以使它播放嗎?
查看完整描述

3 回答

?
POPMUISE

TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊

這是用于顯示處理的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>



查看完整回答
反對(duì) 回復(fù) 2021-05-27
  • 3 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)