Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click

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

Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click相关推荐

[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...
商品类型的下拉框绑定一个事件，通过ajax获取属性
html代码这么写  <table cellspacing="1" cellpadding="3" width=&q ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
功能需求: ①页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框 ②选择省,则市下拉框中出现对应的该省下的市信息,选择市则区/县下拉框中出现对应的该市下面的区/县信息. 需求分析(思路) ...
MVVM下拉框绑定触发事件
开发工具与关键技术:MVVM 撰写时间:2021年06月15日在MVVM中下拉框的绑定跟MVC的下拉框绑定基本一样,只不过在MVVM中要写多一步声明下拉框的属性来接收数据. 首先我们要在DAL层写查 ...
xm-select 下拉框分组单选事件
xm-select 下拉框分组单选事件效果图分组基本写法自行查看官网 xm-select官网官网下拉框分组写法中未含有单选操作样式,所以我们得自己增加on里面的监听事件,数据中的Parent ...
dhtmlXGrid复选框点击事件
dhtmlXGrid复选框点击事件 var mygrid; //加载初始界面 $(function () {mygrid = new dhtmlXGridObject('tdh_colour');my ...
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
文章目录 1. 点击事件参数(click) 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件说明示例 2. 点击事件修饰符 2.1 .stop (阻止冒泡) 使用说明使用示例 2.2 c ...
android动画结束弹出文本框,学完（Android疯狂猜歌 5-2 实现待选文字框点击事件）课程出现的小问题...
疯狂猜歌 5-2 实现待选文字框点击事件自定义的GirdView中,holder的值是a0...a23 holder如果定义在getView 里就没事,点击a1就显示a1,但是,如果定义在成员变量 ...

Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click

Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click相关推荐

最新文章

热门文章

Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click

Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click相关推荐

最新文章

热门文章

Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click

Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click相关推荐