Question

有一个项目名称表和某些按钮，如新建，编辑和删除。现在点击这些按钮，它会打开一个模态，它接收信息并在其中有一个提交按钮，以保存数据库中的更改。

我在本文档中输入密钥的switch case中有一个keydown事件，它在下一页显示了突出显示的项目行的更多细节。

所以会发生什么是当打开模态并且我通过选项卡按钮快速聚焦到提交按钮然后单击输入该聚焦按钮时，项目已提交但是直接打开下一页，其中包含所选项目详细信息#39; t想要。

我希望当modal打开时，应该阻止文件的keydown事件（即不应该工作），我应该能够提交模态。

我想很清楚我想要的是什么。所以，如果他们是一个摆脱它，那么请帮助我。我们将非常感谢您的帮助。

以下是更好地理解它的代码..

$(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

可能会将其破解到位，但我强烈建议不要这样做，而是在事件处理程序中处理它。像

这样的东西

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');

        });

    });

Answer 2

您可以在开始keydown事件处理之前检查是否在页面上打开了任何模态。例如

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

使用自己的模态标识符或其他选择器来定义模式，这必须锁定keydown事件处理。

当模态打开时，如何防止文档中的回车键的keydown事件？

2 个答案: