首页 > 建站教程 > 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();
  })
完整代码如下，您可以运行代码，点击试试：


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


TAGS: 鼠标  点击  空白处  二级  菜单  隐藏  防止  事件