最近遇到一个需求，输入框输入关键词，要出一个带输入建议的弹框，类似于ElementUI自带的<el-autocomplete>，只是需求中的弹框底部有个分页功能，因此用不了自带的<el-autocomplete>，只好自己写了。
然后就遇到blur和click冲突的问题了…
<div class="poi-element"><el-input class="poi-input" ref="poiRef" v-model="poiKeyword" @input="poiInputDebouce"@blur="poiBlurFocus('blur')" @focus="poiBlurFocus('focus')"placeholder="请输入POI关键词" /><div v-if="poiPopperShow" class="poi-popper"><div class="poi-popper__arrow"></div><div class="poi-content"><div v-for="(item, idx) in poiResult" :key="idx" class="poi-content__item" @mousedown.prevent="handlePoi(item)">{{item.name}}</div></div><div v-if="poiPageNo && poiPageTotal" class="page-ware"><div class="page-info" @mousedown.prevent="poiPageTurn(-1)">上一页</div><div class="page-info" @mousedown.prevent="poiPageTurn(1)">下一页</div><div class="">{{poiPageNo}}/{{poiPageTotal}}</div></div></div></div>
解决如下：
1.在blur事件方法内部根据自身逻辑加个延迟(setTimeout)处理。
2. 将click换成优先级更高的mousedown，mousedown优先于blur执行（mousedown > mouseup > click）
PS：核心就是用mousedown和mouseup替代click，然后根据相关的需求，模拟出blur或focus的样子即可。
一、三个事件的触发时机
mousedown
当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会触发 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mouseup
当在元素上松开鼠标按键（左、右键均可）时，会触发 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
click
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会触发一次 click 事件。
二、注意
触发click事件的条件是按下并松开鼠标左键！按下并松开鼠标右键并不会触发click事件。
三个事件的触发顺序：
若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件。
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件。
