原因：因为button按钮点击之后焦点没有移除，点击空格或回车之后会继续执行button的click事件
解决办法：
@keyup.space.native.prevent="fun" @keydown.enter.native.prevent="fun2"
空格与enter 分别绑定一个方法 这样按了也不会影响到原来的点击事件
或着 不用绑定方法：
<el-button @click='detailShow' @keyup.prevent.native @keydown.enter.prevent.native>详细信息</el-button>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<style>
</style>
</head>
<body>
<!-- 阻止空格 回车 小键盘enter触发button按钮点击事件 -->
<div id="app">
<el-button @click='detailShow' @keyup.space.native.prevent="fun" @keydown.enter.native.prevent="fun2">详细信息</el-button>
</div>
</body>
<!-- import Vue before Element -->
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
};
},
computed: {
},
methods: {
detailShow(){
console.log("打印了哦");
},
fun(){
console.log('空格')
},
fun2(){
console.log('enter')
}
},
});
</script>
</html>
方法二：
方法三
2.$(’#id’).blur() // 使按钮失焦
3.this.buttonDisabled = true // 禁用按钮
<el-button @click=“clickFun” :disabled=“buttonDisabled”>点击< /el-button >
