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