js关于blur事件阻塞click事件

出现场景：
页面有一个输入框A绑定了blur事件，且这个事件里面需要用到ajax请求数据，然后有一个按钮B绑定了点击事件；
在A里面输入完信息后，还没失去焦点的时候点击B，这个时候发现只执行了A的blur事件，而B的click事件没有触发。（ps: 若blur事件仅仅只是普通操作，没有ajax异步请求的话是没问题的）

<el-button @click="clickTest">失焦点击测试</el-button>
<el-input @blur="blurTest" placeholder="失焦点击测试"></el-input>
// -----------------------
clickTest(){
    console.log('clickTest');
},
blurTest(){
    console.log('blurTest');
}
// -----------------------
// 结果正常：
// blurTest
// clickTest

blurTest(){
    console.log('blurTest');
    this.$ajax.get('/test')
        .then(res=>{
            console.log('blur请求完成')
        })
}
// 结果：(不会执行点击事件)
// blurTest
// blur请求完成

网上搜到的三种解决办法,(个人觉得都不适合)：
1.blur事件加延时，让click先执行，缺点：click事件虽然执行了，但是在blur请求完成前执行的，不能获取到blur请求后的最新数据（pass）
2.给按钮B加个mousedown，并在mousedown里面阻止默认事件e.preventDefault()，因为mousedown会优先于blur事件。缺点：这样点击事件会执行，但是blur事件不会触发（pass）

另外，若是在vue ui框架element-ui上的标签加事件，@mousedown需要加上.native关键字，不然不会触发

3.按钮B上的点击事件换成mousedown事件，这样两者都会执行，但是mousedown(原click)先执行，类似第一种加延时处理。缺点：除了第一点说的，mousedown事件会在鼠标按下去的一瞬间执行，不是很友好。（pass）

发现上面三种都不好用，于是本人想到，能不能在点击的时候获取到鼠标点了谁，如果被点击的元素有click事件，再在blur的回调函数里面执行(以下方法若有不合适的地方，希望给与指出)

clickTest(){
    console.log('clickTest');
    this.$ajax.get('/test')
        .then(res=>{
            console.log('click请求完成')
        })
},
blurTest(){
    console.log('blurTest');
    this.$ajax.get('/test')
        .then(res=>{
            console.log('blur请求完成')
            if(arguments[0] && arguments[0].relatedTarget && arguments[0].relatedTarget.click){
                arguments[0].relatedTarget.click();
            }
        })
},
// -----------------------------
// 结果OK：
// blurTest
// blur请求完成
// clickTest
// click请求完成

最后编辑于：2020.08.06 11:45:48