按Enter鍵時觸發了兩個事件

Question

在我的代碼中，標題部分具有以下javascript代碼塊

    function validateForm(bid) {
        switch (bid) {
        case "submitIDSearch":
            alert("submitIDSearch");
            return false;
        case "submitNameSearch":
            alert("submitNameSearch");
            return false;
        }
    }
    function fKeyDown(e) {
        var  kc = window.event ? window.event.keyCode : e.which;
        if (kc == 13) {
            document.getElementById('submitNameSearch').click();
        }
    }

然后我有以下HTML代碼塊

    <form name="checkAbsenceForm" method="post" action="absenceReport.htm" onsubmit="return validateForm(this.submited)">
        <label class="q">ID * <input id="searchRUID" name="searchID" maxlength="9" /></label>
        <input id="submitIDSearch" type="submit" value="Search ID" onclick="this.form.submited = this.id;" />
        <hr />
        <label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23" onKeyDown="javascript:fKeyDown(event);"/></label>
        <br />
        <label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23" onKeyDown="javascript:fKeyDown(event);" /></label>
        <input id="submitNameSearch" type="submit" value="Search Name" onclick="this.form.submited = this.id;" />
    </form>

發生的事情是，當我在searchLastName輸入文本框中按Enter鍵時，兩個警報消息框均彈出。 一個顯示submitNameSearch ，另一個顯示submitIDSearch 。 submitNameSearch是所需的事件，但是submitIDSearch不是，我認為默認情況下會觸發該事件。

我可以問一下在searchLastName輸入文本框中按Enter鍵時是否有一種方法可以擺脫submitIDSearch事件嗎？

非常感謝！

Answer 1

當您在表單中按Enter鍵時，將提交表單。 這就是第二次調用validateForm的原因。

兩種解決方案：

1）刪除onKeyDown="javascript:fKeyDown(event);" 具有onsubmit=...上定義的常規驗證。

2）在fKeyDown ，添加e.preventDefault(); 防止默認處理key事件：

function fKeyDown(e) {
    var  kc = window.event ? window.event.keyCode : e.which;
    if (kc == 13) {
        document.getElementById('submitNameSearch').click();
        e.preventDefault();
    }
}

但是，如果您真的只是在fKeyDown這樣做，則解決方案1就足夠了。