点击按钮失焦，导致触发两次

场景：在业务中经常会遇到，我们给输入框绑定了失去焦点调用查询接口，然后也给按钮绑定了点击调用查询接口。这个时候会出现一个bug，那就是当输入框通过点击查询按钮失去焦点，那么就会导致查询接口调用两次，那如何避免这个问题？具体请看下方代码

<div style="width: 60%;">
        <el-input @blur="search()" v-model="input" :placeholder=msg />
    </div>
    <div style="margin-left:5px">
        <el-button type="primary" :icon="Search" @mousedown.prevent="search()">搜索</el-button>
    </div>

这里，我们将@click事件改为 mousedown 事件，并阻止默认事件，这样就可以避免两次调用 接口，并且能保证单独的失去焦点调用或点击调用不受影响
注意：这里是用vue3举例，js可以在 mousedown 事件中event.preventDefault()阻止默认事件发生