首页 > 建站教程 > JS、jQ、TS >  鼠标点击空白处二级菜单隐藏,js防止事件冒泡正文

鼠标点击空白处二级菜单隐藏,js防止事件冒泡

我爱模板网今天在给一个广东的客户做网站时,需要实现一个效果,就是点击空白的地方,菜单隐藏。先看下效果图:
二级菜单
二级菜单
点击“我爱模板网”,显示下面的ul,再点击空白的地方,ul隐藏。一开始js代码如下:
  $("span").click(function(event){
      $(this).next().show();
  })

  $(document).click(function(){
    $("ul").hide();
  })

})
可是这种方法导致点击span没有效果。因为下面的span包含在document中。这就涉及到事件冒泡,即:点击span的时候,适可而止,不能再向下点击到了document。在点击span的时候,阻止事件冒泡即可:
  $("span").click(function(event){
      //防止事件冒泡
      event = event||window.event;
      event.stopPropagation();
      $(this).next().show();
  })

  $(document).click(function(){
    $("ul").hide();
  })
完整代码如下,您可以运行代码,点击试试:


提示:您可以先修改部分代码再运行