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

Posted 2021-02-08 chengd

缘由：今天在做下拉框选择时，遇到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
--------------------- 

 

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

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

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