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

Question

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

在本文档中，我在 switch case 中有一个用于输入键的 keydown 事件，它会在下一页中显示突出显示的项目行的更多详细信息。

所以当模式打开时会发生什么，我通过选项卡按钮快速聚焦到提交按钮，然后单击该聚焦按钮上的 enter，项目被提交但是下一页直接打开，其中包含我没有选择的项目详细信息'想要。

我希望当模态打开时文档的 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.
   }
});

当然有很多更好的方法可以做到这一点，但这是基本的想法。 future 的维护者稍后会在他们试图找出为什么键绑定(bind)有时神秘地无法触发时感谢您。

下面我编辑了问题的示例代码以反射(reflect)这个新设计。我删除了 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');

        });

    });