onMouseDown和onClick的顺序问题

·  阅读 1192
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;  
     }
复制代码

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改