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

项目场景：

el-input 是文本域类型，其绑定了失去焦点事件。 el-button是提交按钮。当点击提交按钮时，目的是执行提交操作，但出现bug，变为执行了el-input的失去焦点事件，没有执行submit事件。

---

问题描述

点击按钮时会触发el-input的失去焦点事件

<div style="position: relative">
  <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" resize="none" v-model="textarea" placeholder="请输入内容" @blur="inputBlur">el-input>
  <div style="position: absolute;bottom:5px;right:5px">
    <el-button size="mini" round @click="clearText">清除el-button>
    <el-button size="mini" type="danger" round :disabled='textarea?false:true' @click="submit">提交el-button>
  div>
div>

---

解决方案：

在按钮上绑定的事件从@click 改为 @mousedown 事件。因为失去焦点事件是mousedown默认触发的，所以，在点击的按钮上阻止mousedown的默认事件即可。
当 el-input 将@click替换为@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发（也就是失效了）
解决方案：在@mouseenter、@mousedown等鼠标事件后面加上native属性

<div style="position: relative">
  <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" resize="none" v-model="textarea" placeholder="请输入内容" @blur="inputBlur">el-input>
  <div style="position: absolute;bottom:5px;right:5px">
    <el-button size="mini" round @mousedown.native="clearText">清除el-button>
    <el-button size="mini" type="danger" round :disabled='textarea?false:true' @mousedown.native="submit">提交el-button>
  div>
div>

submit(event) {
  // 即可阻止点击按钮时触发input失去焦点事件
  event.preventDefault()
},