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

【问题标题】：jQuery keyboard event fires on wrong input fieldsjQuery键盘事件在错误的输入字段上触发
【发布时间】：2018-05-16 09:55:39
【问题描述】：

我正在创建简单的表单，而不是直接提交，而不是之前运行脚本。所以经典的回车不会发送表单。但是，由于用户经常按 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(){
.....
});

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

【问题讨论】：

标签： javascript jquery event-handling

【解决方案1】：

问题是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

【讨论】：

【解决方案2】：

使用 event.stopPropagation();以防止进一步执行。

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

【讨论】：