弹框点击弹框以外的地方弹框隐藏

最新推荐文章于 2022-11-18 16:30:47 发布

原创最新推荐文章于 2022-11-18 16:30:47 发布 · 732 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#弹框

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的点击事件案例，通过点击导航项显示和隐藏屏幕弹层，并利用stopPropagation防止事件冒泡，确保弹层之外区域点击不会触发弹层关闭。

$(function(){
  $('.screen-nav li').on('click',function(e){
    $('.screen-box').show();
    $(document).one('click',function(){
        $('.screen-box').hide();
    })
    e.stopPropagation();/*stopPropagation();方法可以阻止把事件分派到其他节点*/
    $(".screen-box").on("click", function(e){
        e.stopPropagation();
    });
  })    
})