input中blur失去焦点事件与点击事件冲突的解决方法（vue）

2024-04-10 07:57:54

一：前言

最近在做百度的下拉框时遇到一个问题就是在点击下拉框时，input失去焦点，从而是的下拉框消失，使得点击事件没有用，因此查阅资料得到答案。

二：步骤

遇到一个问题，就是输入框input的blur事件与点击click事件的冲突了，在click的时候会先触发blur事件，没有触发click

还有一种情况，下拉框blur和click事件冲突，导致不能正常选择值

原因：由于JavaScript为单线程，同一时间只能执行处理一个事件。“blur优先于click执行”。而在本示例中，由于blur处理程序，会将对下拉框展示区隐藏，所以导致其后续click事件并不会执行。

解决方案1：对blur事件进行延迟，让click先执行。

blurEvent(){     setTimeout(()=>{this.rankSeen=false},300)//设置300ms后让下拉框消失   },

解决方案2：将click事件改为mousedown，让其优先于blur事件执行

由@click="search(item.key)"改为@mousedown"search(item.key)"

亲测这两种方法都可以解决这个问题。

mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。

mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。

注意：

(1)mousedown与click 事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。

(2)mouseup与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

其执行顺序为：mousedown >> mouseup >> click

参考网址：

https://www.iteye.com/blog/570109268-2400122

input中blur失去焦点事件与点击事件冲突的解决方法（vue）相关推荐

input中blur失去焦点事件与点击事件冲突
场景: 当在输入框里输入手机号的时候,输入框高亮,并且关闭按钮显示,input失焦时关闭按钮隐藏现象: 遇到的问题是,当我们点击关闭按钮清空input框数据时,发现只是关闭按钮隐藏了,数据并没有清空 ...
在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
Android 中触摸事件与点击事件分析
触摸事件两种检测触摸事件的方式: 设置触摸监听 setOnTouchListener 返回 true: 表示消费事件 , 可以检测到 down/move/up 事件返回 false: 不消费事件 ...
Android 系统（218）---Android的事件分发机制以及滑动冲突的解决
Android的事件分发机制以及滑动冲突的解决声明: 本文主要涉及VIew的事件分发与滑动冲突的解决,关于View的事件分发流程的部分内容参考自: Android事件分发机制详解:史上最全面.最 ...
ListView的长按事件和点击事件冲突的解决办法
需求是这样的:listView中点击item 跳转到一个activity,长按item可以对这条item进行删除操作,在删除前会弹出dialog(确认删除对话框). 但是在开发过程中发现,当长按某个i ...
eclipse中同步代码PULL报错checkout conflict with files的解决方法
eclipse中同步代码PULL报错checkout conflict with files的解决方法参考文章: (1)eclipse中同步代码PULL报错checkout conflict wit ...
div中的table内容过多时不超出div的范围解决方法
转载自 div中的table内容过多时不超出div的范围解决方法问题描述: 在做界面展示时,table的内容过多,超出div的大小,看着table的边框盖过了div的边框,不美观. 问题解决: ...
mysql+concat函数问题_Mysql5.7中使用group concat函数数据被截断的问题完美解决方法...
前天在生产环境中遇到一个问题:使用 GROUP_CONCAT函数select出来的数据被截断了,最长长度不超过1024字节,开始还以为是navicat客户端自身对字段长度做了限制的问题.后面故意重新I ...
Ubuntu中出现“Could not get lock /var/lib/dpkg/lock”的解决方法
Ubuntu中出现"Could not get lock /var/lib/dpkg/lock"的解决方法参考文章: (1)Ubuntu中出现"Could not ge ...

最新文章

热门文章