keyup.enter和blur绑定同一事件，触发两次的问题

最新推荐文章于 2024-05-11 10:35:15 发布

原创最新推荐文章于 2024-05-11 10:35:15 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#keyup.enter #input #blur

本文探讨了在Vue框架中，使用<el-input>组件时遇到的问题：当按下Enter键，handleAddDomain事件被触发两次。解析了问题原因在于Enter键不仅触发自身事件还触发了blur事件，并提供了解决方案，通过在Enter键按下时直接调用blur方法避免重复触发。

有个需求，要求input框失焦或者键盘按下Enter键时触发handleAddDomain事件，但是实际上在按下Enter键后，会触发两次handleAddDomain事件

<el-input
    class="input-new-tag"
    v-if="inputDomainVisible"
    v-model.trim="inputDomainVal"
    ref="saveTagInput"
    size="small"
    @keyup.enter.native="handleAddDomain"
    @blur="handleAddDomain"/>

原因：键盘按下Enter键执行handleAddDomain方法同时会自动触发blur事件，导致handleAddDomain被执行了两次
解决：键盘按下Enter键执行blur

<el-input
    class="input-new-tag"
    v-if="inputDomainVisible"
    v-model.trim="inputDomainVal"
    ref="saveTagInput"
    size="small"
    @keyup.enter.native="$event.target.blur"
    @blur="handleAddDomain"/>