React中阻止冒泡

---

title: React中阻止冒泡
date: 2022-08-26 22:28:17
tags:

• React
• 框架
• 阻止冒泡行为
  categories:
• 框架
• React

---

React中阻止冒泡

原因：在制作一个关于日历组件的时候，遇到一个bug😥,点击input框让日历显示，点击日历以外的区域日历框隐藏。但是无效！且有闪烁bug！

原本的思路是利用获取焦点失去焦点实现，点击input获取焦点显示日历框，失去焦点后再隐藏日历框。

但是! 日历框中有切换月份的按钮，当点击按钮时会失去焦点，又再次触发失去焦点的事件，有闪烁bug。如图：

所以我就给div添加了tabIndex="-1"使div也可以添加获取焦点失去焦点方法。为最外层的div添加click事件获取焦点显示日历盒子，但是当点击日历盒子内部的标签后会依次触发失去焦点，获取焦点事件，形成闪烁(我的显示与隐藏是提前写好的动画类名)；

以上就是我最初尝试的方法一，无效。后来想到可以利用点击html触发隐藏日历盒子的方法

为document添加点击事件，

    useEffect(()=>{
        // 点击除去日历以外的部分隐藏日历
        document.onclick = ()=>{
            setShow(false) // 隐藏日历盒子
        }
    },[])//仅仅在第一次return后触发

但是，如果不在点击div显示日历盒子的方法内添加阻止冒泡，当点击日历盒子内的任何地方，都会冒泡到document上触发隐藏盒子的方法；所以就要利用阻止冒泡！

    // div获取焦点
    function divFocus(e) {
        e.nativeEvent.stopImmediatePropagation();
        setFocus(true) // 设置触发div后的样式为开启
        setShow(true) // 设置日历盒子显示
    }

此时，点击日历盒子以外的地方就会将日历盒子隐藏！😋

参考帖子(力推)