如何防止模態打開時文檔中輸入鍵的keydown事件？

Question

有一個項目名稱和某些按鈕，如新建，編輯和刪除表。 現在點擊這些按鈕，它會打開一個獲取信息的模式，並在其中有一個提交按鈕以保存數據庫中的更改。

我在開關時的keydown事件這個文件，該文件顯示在下一頁的高亮項行的進一步細節回車鍵。

所以會發生什麼情況是當模式打開，我迅速通過標籤按鈕焦點提交按鈕，然後單擊該焦點按鈕上的輸入，該項目被提交，但直接下一頁打開與選定的項目細節我不想要。

我想，當模式是開放的，應防止文檔的keydown事件（ie.should不工作），我應該能夠提交模式。

我想這很清楚，我想要什麼。所以，如果他們是一個擺脫它，那麼請幫助我。您的幫助將不勝感激。

下面是代碼更好地理解它..

$(document).keydown(function(e){ 
     switch(e.which){ 

      /* Enter Key */ 
      case 13: 
       if(localStorage.check_submit != 1){ 
        location.assign('estimate_partyitems.php'); */ 
        break; 
       } 

     } 
     /* End of Switch Case */ 
    }); 
    /* End of Keydown Event */ 

$("#btn_new").on("click", function(){ 

     $('#newestimate_modal').on('shown.bs.modal', function() { 
      // some code 
      localStorage.check_submit = 1; 
     }); 

     $('#newestimate_modal').on('hidden.bs.modal', function (e) { 
      // some code 
      localStorage.check_submit = 0; 
     }); 

     /* On Adding the New Estimate */ 
     $('#newestimate_form').submit(function(event){ 
      /* 
      preventDefault method cancels the event if it is cancelable 
      Here it is used to prevent the form from submitting. 
      */ 
      event.preventDefault(); 

      // some code and ajax requests 

      /* unbind() method removes event handlers from selected elements. */ 
      $("#newestimate_form").unbind('submit'); 

     }); 

    }); 

Answer 1

您可以檢查在keydown事件處理開始之前是否在頁面上打開任何模態。例如

$(document).keydown(function(e) { 
    if ('#modal1, #modal2, #modal3').hasClass('in') return; 
    // handle keydown event 
} 

使用自己的模態標識符或其他選擇器來定義模態，它必須鎖定keydown事件處理。

Answer 2

這可能是可以侵入的地方，但我會強烈建議不這樣做，而是處理這事件處理程序。類似於

let modalOpen = false; 
window.onkeydown(e => { 
    if (!modalOpen) { 
     // handle the command as normal. 
    } 
}); 

當然，還有很多愛好者/更好的方式來做到這一點，但這是基本的想法。未來的維護者稍後會在他們試圖找出爲什麼鍵綁定有時會神祕地失敗時感謝你。

下面我編輯了這個問題的示例代碼來反射這個新設計。我刪除了localStorage位，因爲它似乎沒有做任何事情。 localStorage是一個特殊的對象，充當一種客戶端數據庫，用於以類似cookie的方式保持狀態。

let modalOpen = false; 
$(document).keydown(function(e){ 
     if (!modalOpen) { 
      switch(e.which){ 

       /* Enter Key */ 
       case 13: 

        location.assign('estimate_partyitems.php'); */ 

      } 
     } 
     /* End of Switch Case */ 
    }); 
    /* End of Keydown Event */ 

$("#btn_new").on("click", function(){ 

     $('#newestimate_modal').on('shown.bs.modal', function() { 
      // some code 
      modalOpen = true; 
     }); 

     $('#newestimate_modal').on('hidden.bs.modal', function (e) { 
      // some code 
      modalOpen = false; 
     }); 

     /* On Adding the New Estimate */ 
     $('#newestimate_form').submit(function(event){ 
      /* 
      preventDefault method cancels the event if it is cancelable 
      Here it is used to prevent the form from submitting. 
      */ 
      event.preventDefault(); 

      // some code and ajax requests 

      /* unbind() method removes event handlers from selected elements. */ 
      $("#newestimate_form").unbind('submit'); 

     }); 

    });