在單擊 jquery 上綁定兩個事件

Question

我想用一個按鈕創建一個簡單的用戶交互來開始和停止錄制音頻，比如 whatsapp。 我查看了 stackoverflow 以了解我是否錯了，因為我知道不可能在同一個元素上綁定兩個點擊事件，所以我決定在 codepen 上測試代碼，但它不會產生預期的結果：

$('#audioBtn').on('click' ,function(e){
  e.preventDefault();
  if( $(this).hasClass('active') ){
    $(this).removeClass('active')
    .addClass('inactive');
    console.log('Recording stopped');
  }
});

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  if( $(this).hasClass('inactive') ){
    $(this).addClass('active')
    .removeClass('inactive');
    console.log('Recording start');
  }
});

發生的事情是兩個事件同時登錄到控制台，但這不是我想要的，我只想在用戶錄制音頻時使用相同的按鈕開始和停止錄音並更改圖標。 有沒有辦法做到這一點？

Answer 1

我知道不可能在同一個元素上綁定兩個點擊事件

事實並非如此，完全有可能將同一事件類型的多個事件處理程序綁定到單個元素。 您的情況的問題是因為兩個處理程序相互沖突； 一個設置類，另一個檢測類並刪除它。

要解決此問題，您需要使用單個事件處理程序來檢測元素的狀態並根據該狀態更新它。 在您的情況下，一個簡單的else語句將起作用。

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).removeClass('active').addClass('inactive');
    console.log('Recording stopped');
  } else {
    $(this).addClass('active').removeClass('inactive');
    console.log('Recording start');
  }
});

更進一步，您可以使用toggleClass()來交換類：

 $('#audioBtn').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { console.log('Recording stopped'); } else { console.log('Recording start'); } $(this).toggleClass('active inactive'); });

 .active { color: #C00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="audioBtn">Start/Stop</button>

Answer 2

為了簡單toggleClass()您可以只toggleClass()類：

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  $(this).toggleClass('active');
});

Answer 3

我認為只有活躍的課堂就足夠了。 您可以檢查是否處於活動狀態並簡單地切換它。 您可以通過檢查是否具有活動類的 id 來執行任何操作。

 $('#audioBtn').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { $(this).toggleClass('active'); console.log('Recording stopped'); } else { $(this).toggleClass('active'); console.log('Recording start'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="audioBtn"> click </div>