解决如何在点击按钮时，不触发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>