onBlur和onClick的顺序问题

 用ReactHooks自己实现下拉组件（日历/下拉列表等），使用onClick和onKeyUp模拟onFocus，实现下拉展开；使用 onBlur进行下拉收起。

1. 发现问题

onClick事件会引起焦点切换，触发onBlur， 导致点击子组件进行选择等操作的时候会出现自动收起再展开的现象。

<div
   onClick={handleShow}
   onBlur={handleBlur}
 >
   <input/>
   // other panel or other component
<div>

   let handleBlur = (e) => {        
      setStatus(false)       
    }   
     //展开  
   let handleShow = (e) => {       
       setStatus(true)              
   }
复制代码

2. 解决方案

1.  如果是click子组件导致的onBlur跳过事件的执行。非子组件的onBlur执行。

2.  查找各种鼠标事件的顺序

onMouseDown(最早)  -> onBlur -> onClick -> onMouseUp

3. 确定是否由click导致的blur可以通过onMouseDown

     let mouseFlag = useRef(true);   
    //失去焦点    
     let handleBlur = (e) => {        
         if (!mouseFlag.current) return;        
          setStatus(false)       
       }   
     //展开    
    let handleShow = (e) => {      
        mouseFlag.current = true;         
        setStatus(true)             
     }    
     const handleMouseDown = (e) => {      
         mouseFlag.current = false;  
     }
复制代码

PS：

如果不考虑后续添加其他功能，最简单的可以使用onFocus代替onClick。React的合成事件所有元素支持onFocus和onBlur。