jQuery键盘事件在错误的输入字段上触发

Question

与之前运行脚本相比，我正在创建不直接提交的简单表单。 因此，经典点击Enter将不会发送表格。 但是，由于用户经常按Enter键来发送表单，因此我创建了用于单击Enter的简单扩展，即单击按钮时将调用脚本。

例如，我有一个简单的表格：

<form id="testForm">
  <input type="email" id="email" />
  <input type="password" id="pass" />
  <button id="btnLogin" type="button">Login</button>
</form>

我创建的扩展名为：

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        function _init(){
            $(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

然后在脚本中，我这样调用：

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(){
.....
});

这正在工作。 问题是 ，对于每个输入字段，它都工作两次 。 看起来其他输入字段正在接受按键（或按键按下）事件。 还是我错过了什么？

Answer 1

使用event.stopPropagation（）; 以防止进一步执行。

$(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.stopPropagation();
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });

Answer 2

问题是this是在_init函数中引用窗口对象，以避免尝试以下代码

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        var self = this;
        function _init(){
            $(self).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(e){
    console.log('righty');
});

如果您想尝试的话，有一个工作示例是jsfiddle