您的位置 首页 焦点资讯

解决如何在点击按钮时,不触发input的失去焦点事件

业务场景:el-input 是查询关键词的搜索输入框,其绑定了失去焦点事件。 el-button是查询按钮。当点击查询按钮时,目的是执行查询操作,但出现bug,变为执行了el-input的失去焦点事件,没有执行searchHandle事件。

<el-input ref="searchInput" v-model="keywords" placeholder="请输入查询内容" clearable @keyup.enter.native="searchHandle" @focus="inputFocusHandle" @blur="inputBlurHandle" /> <el-button type="primary" icon="el-icon-plus" @click="searchHandle">add</el-button>

思路: 在按钮上绑定的事件从@click 改为 @mousedown 事件。因为失去焦点事件是mousedown默认触发的,所以,在点击的按钮上阻止mousedown的默认事件即可

解决方案:

<el-input ref="searchInput" v-model="keywords" placeholder="请输入查询内容" clearable @keyup.enter.native="searchHandle" @focus="inputFocusHandle" @blur="inputBlurHandle" /> <el-button type="primary" icon="el-icon-plus" @mousedown.native="searchHandle">add</el-button> searchHandle(event){ // 即可阻止点击按钮时触发input失去焦点事件 event.preventDefault(); } 

vue中使用@mousedown、@mouseenter等鼠标事件失效解决办法

当 el-input 将@click替换为@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时,发现事件不触发(也就是失效了)

解决方案:在@mouseenter、@mouseenter等鼠标事件后面加上native属性

<el-button type="primary" icon="el-icon-plus" @mousedown.native="searchBtn">add</el-button>

原文链接:https://blog.csdn.net/m0_37566921/article/details/112761575?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166580747916800180620972%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166580747916800180620972&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-112761575-null-null.nonecase&utm_term=%E7%84%A6%E7%82%B9

热门文章