解决blur与click冲突

Posted 2023-03-30

参考技术A

在开发下拉选择（picker）组件中遇到，点击输入框出现下拉列表，再点击下拉列表选项后下拉列表自动收缩，然而选项值并没有选到

demo演示：

实际开发中，我们会经常遇到某一下拉列表框，点击其他元素消失列表框；点击下拉框子元素使其生效的需求。这就会面临冲突问题。
demo演示：

执行demo,你会发现，并不能正确获取下拉框中某值。
这是为什么呢？ ：前文已知，blur优先于click执行，而javascript为单线程，同一时间只能执行处理一个事件，这就导致blur事件优先触发，隐藏了下拉框展示区，所以导致其后续click事件并不会执行。

方法1:
用setTimeout对blur事件进行延迟，让click先执行

方法2:
使用mousedown代替click让其优先执行
mousedown事件 ：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。
mousedown事件优先于click事件

下拉框选择blur与click冲突问题

缘由：今天在做下拉框选择时，遇到click和blur冲突问题；具体现象如下

　　1、intput框获取焦点（focus事件）时显示隐藏的下拉框，失去焦点（blur事件）则隐藏下拉框

　　2、点击选择（click事件）下拉框内容时获取值，然后intput失去焦点（blur事件）隐藏下拉框

　　3、发现click事件无效，blur事件会优先于click事件执行，导致click事件无效

解决：使用mousedown替换click使点击选择事件优先执行

　　mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。
　　mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。
　　注意：
　　（1）mousedown与click 事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。
　　（2）mouseup与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

---------------------
原文：https://blog.csdn.net/ligang2585116/article/details/51764828
--------------------- 

 

***********************************************************

 学习永远不晚。——高尔基

***********************************************************