关于element-ui的blur事件失效，select的blur的bug，以及row在@blur延迟的解决

最新推荐文章于 2025-07-01 07:20:44 发布

Program W

最新推荐文章于 2025-07-01 07:20:44 发布

阅读量7.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 大前端 ES6 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_46037781/article/details/119816485

大前端同时被 3 个专栏收录

89 篇文章

订阅专栏

Vue

64 篇文章

订阅专栏

ES6

17 篇文章

订阅专栏

本文探讨了在Vue中遇到的blur事件失效问题，提出通过添加`capture`和`native`修饰符确保事件在元素失去焦点时正确触发。同时，针对blur事件延迟执行导致的数据获取错误，使用Promise的sleep函数实现延迟处理，确保在正确的时间获取到所需数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、blur事件失效

这个blur的生效十分有问题，很多时候都无效，偶尔点击元素内部以及选项的时候突然就生效了

<el-select @blur="handleBlur">
</el-select>

二、使用`native`与`capture`让`blur`生效

虽然点击元素内部还是会让blur生效（点开选项隐藏选项的时候生效），但是这能够确保点击元素后，在光标出去时能够生效（而这也足够了）。

@blur.capture.native="handleBlur(row)"

capture是添加事件监听中的捕获
addEventListener(<event-name>, <callback>, <use-capture>);

三、关于row，在@blur延迟的问题

直接使用的时候，handleBlur每次都是获取row的上一条数据

handleBlur(row) {
        if(!Named.checkAttrCodeNum(row.columnsCode.length)) this.$refs.type.focus()
      }

于是想到了js中的sleep延迟，代码就变成了这样来解决

sleep(time) {
        return new Promise(resolve => setTimeout(resolve, time));
},
handleBlur(row) {
         this.sleep(100).then(() => {
            console.log('handleBlur', row.columnsCode.length);
            if(!Named.checkAttrCodeNum(row.columnsCode.length)) this.$refs.type.focus()
	})


}