按enter回車，會觸發button上的事件的原因及解決辦法

文章目錄

• 1、一開始是粗暴的禁用回車事件，但是這樣會導緻其他需要回車觸發的事件也執行不了。（推薦⭐⭐）
• 2、綁定某個按鈕，隻有聚焦時，回車才生效（推薦⭐⭐⭐⭐⭐）
• 3、全局綁定 (不推薦，除非控制好if條件)
• 4、按enter回車無限觸發事件 解決：失去焦點
• 5、keyCode對照表

1、一開始是粗暴的禁用回車事件，但是這樣會導緻其他需要回車觸發的事件也執行不了。（推薦⭐⭐）

ducoment.onkeydown = (e) => {
	if(e.keyCode == 13) {
		return false;
	}
}
           

2、綁定某個按鈕，隻有聚焦時，回車才生效（推薦⭐⭐⭐⭐⭐）

/* 滑鼠聚焦時，回車事件 */
$("#search_ipt").bind("keypress", function(){
	if (event.keyCode == 13){
		// 觸發需要調用的方法
		$("#search_but").click();
	}
})
           

3、全局綁定 (不推薦，除非控制好if條件)

$(document).keypress(function(e) { 
  if((e.keyCode || e.which)==13) { 
  	// 觸發需要調用的方法
    $("#search_ipt").click();
  }
 });
           

4、按enter回車無限觸發事件 解決：失去焦點

<template>
  <div>
    <el-button @click="clickBtn">新增</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 點選事件
    clickBtn (e) {
      let target = e.target
      // 根據button元件内容 裡面包括一個span标簽，如果設定icon，則還包括一個i标簽，其他情況請自行觀察。
      // 是以，在我們點選到button元件上的文字也就是span标簽上時，直接執行e.target.blur()不會生效，是以要加一層判斷。
      if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
        target = e.target.parentNode
      }
     // 讓其失去焦點
      target.blur()
    }
  }
}
</script>
           

5、keyCode對照表