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