react阻止冒泡事件（使用原生js方法）

最新推荐文章于 2022-08-26 22:54:19 发布

原创最新推荐文章于 2022-08-26 22:54:19 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react取消冒泡事件

js 同时被 3 个专栏收录

7 篇文章

订阅专栏

问题总结

7 篇文章

订阅专栏

demo，react

4 篇文章

订阅专栏

本文介绍了在前端开发中处理弹出框及其遮罩层的显示与隐藏逻辑。特别是针对带有外边遮罩层的弹出框，文章提供了具体的原生 JavaScript 实现方法，包括如何阻止事件冒泡以保持遮罩层的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//弹出框消失

    cancelShade(){
        this.refs.shadeDiv.style.display="none"
        console.log(2)
    }
    keepShade(event){
        console.log(1)
        event.preventDefault();    // 阻止默认事件
        event.stopPropagation();
        this.refs.shadeDiv.style.display="block"
    }

在当前弹出框有外边遮罩层的时候，也就是外边还有一个div的时候，使用原生的取消冒泡方法
之前的写法只适用于弹出框直接在document上的情况