### 实现
Vue 中
按钮通过按下
回车键触发
点击事件
在
Vue 开发中，可以通过绑定 `@keyup.enter` 事件来监听用户的
回车操作并触发动态行为。以下是具体实现方式以及注意事项。
#### 绑定 `@keyup.enter` 到
按钮
可以将 `@keyup.enter` 直接绑定到输入框
或其他可聚焦的组件上，在用户按
回车时调用指定的方法：
```html
<template>
<div>
<!-- 输入框 -->
<input
type="text"
placeholder="请输入内容..."
@keyup.enter="handleButtonClick"
/>
<!--
按钮 -->
<button id="submitButton" @click="handleButtonClick">提交</button>
</div>
</template>
<script>
export default {
methods: {
handleButtonClick
() {
console.log
('
按钮被
点击或回车键被按下'
);
// 执行其他业务逻辑...
}
}
};
</script>
```
上述代码实现了当用户在输入框中按下
回车键时，自动执行与
按钮点击相同的操作[^1]。
#### 处理多次触发问题
如果
页面中有多个事件可能同时触发（例如 `@keyup.enter` 和 `@blur`），可能会导致重复调用目标函数。解决此问题的一种常见方法是阻止不必要的默认行为
或者调整事件优先级[^2]。
以下是一个优化后的例子，防止 `@keyup.enter` 和 `@blur` 同时触发：
```html
<template>
<div>
<el-input
class="input-new-tag"
v-model="inputValue"
@keyup.enter.native="onEnterKey
($event
)"
@blur="onBlurEvent">
</el-input>
</div>
</template>
<script>
export default {
data
() {
return {
inputValue: ''
};
},
methods: {
onEnterKey
(event
) {
event.target.blur
(); // 主动失去焦点以避免 blur 再次触发
this.handleInputConfirm
();
},
onBlurEvent
() {
// 如果不需要额外处理，则无需定义任何逻辑
},
handleInputConfirm
() {
console.log
('确认输入:', this.inputValue
);
}
}
};
</script>
```
在此示例中，通过手动调用 `$event.target.blur
()` 来消除双重触发的可能性[^3]。
#### 防止表单意外
刷新
对于包含 `<form>` 的场景，默认情况下按下
回车可能导致整个
页面重新加载。为了避免这种情况发生，可以在相关方法中显式调用 `event.preventDefault
()`[^4]：
```
javascript
methods: {
handleQuery
(event
) {
event.preventDefault
(); // 阻止表单提交引起的
页面刷新
alert
('查询已启动！'
);
}
}
```
这样即使用户在表单内按键也不会影响用户体验。
---
扫一扫
1756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
