业务场景：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();