vue 项目中，enter 键提交触发两次的原因及解决方法

最新推荐文章于 2025-03-17 14:15:44 发布
最新推荐文章于 2025-03-17 14:15:44 发布
阅读量2.2k 收藏 1
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46034942/article/details/128812217
版权

    • 原因分析：

enter 事件发生的时候同样失去了焦点，所以会触发 blur 事件。看看你的 blur 事件是不是和enter 事件是同一个方法。如果你要是想着说定义两个方法，若他们的操作是一样的，根本解决不了问题，依旧会执行两个方法名不同的两个函数体，最简单的解决方法如下

    • 解决方法：

@keyup.enter.native="$event.target.blur()"
举例：
@blur="handleInputConfirm(params)"
@keyup.enter.native="$event.target.blur()"

Vue下URL地址栏参数改变却不能刷新界面
夏已微凉、
05-20 3978
一、前言二、原因三、解决 一、前言 下拉选择，根据不同的值展示不同的内容，初次点击可以获取到相应的值，但是当第二次点击时，虽然地址栏的参数改变了，但页面内容并没改变。 URL 如下： http://127.0.0.1:8080/#/user?hobby=study http://127.0.0.1:8080/#/user?hobby=play 二、原因 vue项目中路由跳转默认采用hash的方式，而hash的变化不会导致浏览器发送请求到服务器； 将获取数据的的函数的执行放在了Vue生命周期函数 .
vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
weixin_39521068的博客
12-20 1475
几乎在所有浏览器中，都具有 Tab 键切换焦点的功能。但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能。为了交付上线拿到钱，我们只好再一次毫无原则性的接受了客户的需求。在上一代人中，大多都有这种操作习惯。习惯把保存成为编辑，习惯用回车替换 Tab。这是受到微软 excel 荼毒的结果。起初我以为这个功能很简单，无非就是把 Enter 键的功能转接到 Tab 键上面，分分钟就可以解决掉的...
解决前端vue项目问题：element避免二次触发的回车来刷新页面
意初的博客
09-09 1231
回车时element会二次触发不必要的回车刷新页面，需要加阻止事件即可。
实现回车键自动登录功能：Vue 2 和 Vue 3 的解决方案
最新发布
肥晨开发的学习之路
03-17 995
这个功能看似简单，但在 Vue 2 和 Vue 3 中的实现方式略有不同。本文将详细介绍如何在 Vue 2 和 Vue 3 中实现这一功能，并提供完整的代码示例。修饰符已被弃用，因为 Vue 3 的事件机制更加智能，默认会将原生事件绑定到组件的根元素上。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。如果你有其他问题或更好的实现方式，欢迎在评论区分享！在 Vue 2 中，我们可以使用。方法，用于处理表单提交逻辑。与 Vue 2 类似，定义。在 Vue 3 中，
Vue input输入框同时绑定blur和回车事件，且两个事件相同，按下回车会触发两次事件的解决办法
qq_44573359的博客
07-06 3253
由于回车动作会使input失去焦点，从而触发blur事件，所以会触发两次事件。
vue中@blur和@keyup.enter同时使用会重复触发的问题
xuexi0754的博客
06-20 1071
记录：做一个树结构重命名的功能时点击回车触发事件请求接口重命名时出发了两次，因为两个事件都触发了解决办法： 按下回车直接调用焦点事件，就可以了@keyup.enter.native="$event.target.blur()"
解决vue keyup.enter与失去焦点事件绑定相同函数 会触发两次的问题
qq_46448507的博客
06-09 1763
问题分析：按下键盘也会触发失去焦点事件，所以会触发两次 解决办法 @keyup.enter.native="$event.target.blur" @blur="handleInputConfirm() 让键盘事件指向鼠标失去焦点，通过$event.target.biur ...
vue输入框 enter_多好的交互：enter、blur触发相同事件，为啥enter就走了2次
weixin_39543478的博客
01-26 388
解决2次回调「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表。不过输入框多了，摸鼠标的次数就多了，咱用户就变得莫名烦躁了、、、加个回车提交吧！！！然后上面的bug应用而生呀～每次回车都会提交2次请求，被敏锐的大佬给发现了，，，别说我开始还真没注意，不过很快意识到还真是的。「原因」：每次enter的时...
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
10-15
总结来说，解决Vue中在循环中使用`@mouseenter`和`@mouseleave`事件闪烁问题的关键是将事件绑定到父元素，而不是每个循环的子元素。通过调整事件处理逻辑和状态管理，我们可以有效地防止闪烁，提供更流畅的用户体验...
JS中mouseover和mouseout多次触发问题如何解决
10-22
针对标题“JS中mouseover和mouseout多次触发问题如何解决”，主要内容探讨的是在JavaScript中使用jQuery库时，处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时，这些...
vue监听键盘事件的快捷方法【推荐】
01-21
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符： <input v-on:keyup.13=submit> 对于一些常用键，还提供了按键别名： <input @keyup.enter=submit> ...
vue 项目情景应用+深度理解+面试高频题（持续更新中）
m0_51244077的博客
10-27 1129
vue 项目情景应用+逻辑业务理解
解决Vue按钮多次点击重复提交数据问题
歲月的孤獨
08-27 9520
解决Vue按钮多次点击重复提交数据问题 这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下。 这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。 事件分为两种情况： 第一种： 不操作数据型 第二种： 操作数据型 <template> <button @click="submi...
vue 元素上同时绑定了keyup.enter和blur事件，会触发两次的解决方案
LingHuzh的博客
05-11 577
在vue中自定义组件上同时绑定了keyup和blur事件，用于完成input输入，但blur后触发一次事件，按下enter却触发两次；：按下enter也算是失焦了，所以会先执行keyup.enter，再执行blur，这样就造成了方法执行了两次。
vue防止点击事件重复提交
学习记录
06-28 1591
按钮防止重复点击
解决vue keyup.enter和blur绑定同一事件，触发两次的问题
qq_40544291的博客
03-15 1880
<el-input ref="editTagFoucus" size="mini" @keyup.enter.native="$event.target.blur" @blur="editCompleteTag(items)" v-model='items.name'> </el-input>
Vue键盘事件
weixin_55772633的博客
07-09 2784
以上代码运行后，在input框输入内容，按下回车将会打印到浏览器的控制台。
Vue项目element ui 回车多次触发
code__monster的博客
06-08 1792
el-input keyup.enter.native是一个Vue.js指令，用于监听el-input组件上的 "enter "按键事件。实现多次搜索，或者键入值改变等需求，需要利用键盘使用el-input 中的 change 事件只有当value值改变或者不同时才会再次触发，所以可以利用keyup.enter.native。然后用键值符进行改变即可，判断处的 this.searchValue 为v-model双向绑定值，对应更改为自己的值即可。不论value值是改变与否，只要敲击回车就会调用。
记录vue使用input组件，失去焦点和按下回车键造成二次执行同一方法
weixin_69041698的博客
02-20 285
问题：回车触发键盘事件后，输入框会自动失去焦点，导致 @keydown.enter 和 @blur 两个事件连续触发。解决：按enter回车之后使el-input失去焦点。
在 el-pagination触发两次
03-08
### 解析 `el-pagination` 组件触发两次的原因 当使用 Element UI 的 `el-pagination` 组件时，可能会遇到在切换分页条数或者跳转页面时发生两次请求的情况。这一现象通常由以下几个原因引起： - **事件冒泡**：如果存在全局监听器（例如 Enter 键），这些监听器可能会影响 `el-pagination` 中的输入框行为，从而导致重复提交[^2]。 - **内部逻辑处理不当**：组件内部对于某些操作可能存在冗余调用，特别是在状态更新过程中未能有效控制请求时机。 为了防止此类情况的发生并确保每次交互只触发展望一次请求，可以采取如下措施来优化代码实现方式： #### 方法一：调整全局监听条件 针对因全局监听引发的问题，在设置键盘快捷键或其他形式的全局监听时增加特定的选择器判断，避免误触发 `el-pagination` 内部控件的行为。具体来说就是在绑定 enter 事件时加上对目标元素类名的验证，比如确认当前聚焦的是不是属于 pagination 部分内的 input 输入框。 ```javascript document.addEventListener(&#39;keydown&#39;, function(event){ const targetClassList = event.target.classList; if (event.key === &#39;Enter&#39; && !targetClassList.contains(&#39;is-in-pagination&#39;)) { // 只有不在pagination区域才响应enter按键 handleCustomAction(); } }); ``` #### 方法二：自定义分页大小变更方法 通过覆盖默认的 pageSize 改变函数来自行管理何时发送数据获取请求。可以在修改每页显示数量之后延迟一定时间再发起实际的数据加载动作，以此减少不必要的即时查询次数。 ```vue <template> <!-- ... --> <el-pagination @size-change="handleSizeChange" :page-size.sync="pageSize"> </el-pagination> </template> <script> export default { data() { return { loading: false, timeoutId: null, // ... }; }, methods: { handleSizeChange(newSize) { clearTimeout(this.timeoutId); this.loading = true; this.timeoutId = setTimeout(() => { fetchData({ size: newSize }).then(response => { updateData(response.data); this.loading = false; }); }, 300); // 设置适当延时以等待用户完成选择 } } }; </script> ``` 上述策略能够有效地缓解由于快速连续点击或者其他因素造成的多次请求问题，同时也提高了用户体验的一致性和流畅度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值