onMouseDown和onClick的顺序问题

流程式的开发，遇到点击交互，第一反应就是使用onClick。其实除了onClick,还有其他事件可以更好的进行交互！！如：onMouseDown和onFocus等

1. onClick的问题

在使用onFocus和onBlur事件【React所有元素都支持onFocus和onBlur，但是必须具备tabIndex属性，否则无效】进行事件触发的自定义组件中。子组件onClick事件会引起焦点切换，触发B组件的onBlur，再引发A组件的onFocus事件。

而onClick事件发生在onFocus之后，无法阻止后续的事件触发。

如果想要避免后续事件触发，则可以有两种方案。

2. 解决方案

方案一（修改子组件触发方式）：

阻止onBlur和onFocus事件的触发,需要在执行顺序比他们早的事件中进行阻止。可以更换onClick触发事件为onMouseDown事件，因为该事件执行顺序在onFocus和onBlur事件之前，可以阻止事件传播。

方案二（修改父组件触发方式）：

保留onClick触发事件（较复杂；易引发其他错误🙅不建议使用）

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

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

onMouseDown(最早)  -> onBlur（onFocus） -> 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;  
     }