大家看一下一段代碼:


我只為按鈕設置了一個點擊事件的情況下,只有點擊按鈕本身才會請求接口并替換數據,但是在實際測試中發現,對input按下回車鍵也會觸發該接口,起初以為是事件冒泡,但由于是同級,且經過測試依然會生效。最后在大佬的點撥下知道了這是from表單的自動提交。
在Form表單中input會義自動響應回車事件。這是表單的默認提交動作。表單的提交行為,可以用兩種方式定,一是form表單自身,二是form表單的button元素(包括type='submit’的input標簽,以及type=‘submit’的button元素,button元素type為Submit)。當用戶在一個表單的input標簽按enter按鈕時,瀏覽器會找到表單中的第一個提交按鈕(submit button),并觸發click,同時提交表單。
而本段代碼中我的第一個按鈕就是提交按鈕,便會觸發查詢。
解決方法有兩種:
1.在from標簽中添加以下代碼,判斷在表單內按下回車,就會return函數,強制停止
onkeydown="if(event.keyCode==13){return false;}"2.也可以使用jq,該方法抓取了頁面內所有的from,并在按下回車鍵時阻止默認提交
$('form').on('keypress', function(event) {
// 判斷按下的鍵是否是回車鍵
if(event.which === 13) {
// 阻止默認行為
event.preventDefault();
}
});更多jq知識點擊這里
上一篇: js中n++與++n的區別
下一篇: Layui表格中使用Tips彈層
)
)
)
