最近遇到一个需求，输入框输入关键词，要出一个带输入建议的弹框，类似于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事件。