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

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

    ref="searchInput"

    v-model="keywords"

    placeholder="请输入查询内容"

    clearable

    @keyup.enter.native="searchHandle"

    @focus="inputFocusHandle"

    @blur="inputBlurHandle"

/>

add

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

解决方案：

    ref="searchInput"

    v-model="keywords"

    placeholder="请输入查询内容"

    clearable

    @keyup.enter.native="searchHandle"

    @focus="inputFocusHandle"

    @blur="inputBlurHandle"

/>

add

searchHandle(event){

    // 即可阻止点击按钮时触发input失去焦点事件

    event.preventDefault();

}

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

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

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

add