使用事件冒泡原理控制菜单或浮层

在开发WEB中，经常碰到这样一种需求：点击页面中的某个按钮或链接是弹出一个菜单或者是浮层，并且点击该按钮或者链接以外的区域时，菜单或浮层消失。以前没有了解过事件冒泡的时候，使用很多JS代码来实现这样的效果；本人最常用的方法是在该链接上添加一个特殊的属性以及唯一的一个属性值，然后在body上绑定单击事件，触发事件是获取该事件的源节点：event.target（IE浏览器中使用：event.srcElement），然后判断源节点的属性与之前设置的是否一致。

后来学习了事件冒泡的机制以后，突然觉得使用阻止冒泡的方法实现该效果思路更加清晰，思路是这样的：在触发该按钮或链接的单击事件的时候显示菜单或浮层，并且组织该事件向上冒泡，并在body的单击事件中隐藏该菜单或者浮层；这样单击该按钮的时候，先显示了浮层，由于阻止按钮的单击事件向上冒泡，所以此时不会触发body的单击事件，而点击按钮之外的其他区域的时候，由于其他区域的单击事件会冒泡的body上而触发body的单击事件，所以会隐藏菜单或者浮层。代码如下：

HTML：

<!DOCTYPE html>
<html>
<head>
<title>测试</title>

<style type="text/css">
*{ font-size: 12px;}
ul,li{ padding: 0; margin: 0; list-style: none;}
/*按钮的样式*/
.menuBtn{ color: 12px; color: #666;}

/*菜单的样式，默认菜单是隐藏的*/
.menu{ display: none; height: auto; width: 100px; padding: 3px; border: 1px solid #ccc; position: absolute; left: 10px; top: 30px;}
.menu li{ height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; text-align: center;}
.menu li:last-child{ border: 0;}
</style>
<!--使用jQuery-->
<script type="text/javascript" src="../resources/scripts/jquery-1.4.2.js"></script>
</head>

<body>
&nbsp;<a id="J_menuBtn" href="javascript:;" class="menuBtn">弹出菜单</a>
<ul id="J_menu" class="menu">
    <li>菜单项a</li>
    <li>菜单项b</li>
    <li>菜单项c</li>
    <li>菜单项d</li>
</ul>
</body>
</html>

JS：

var btn = $("#J_menuBtn"),
    menu = $("#J_menu");

$(document.body).click(function () {
    // 点击body是隐藏菜单
    menu.hide();
});
btn.click(function (ev) {
    // 点击链接（或按钮）是现实菜单
    menu.show();

    /* 阻止链接（或按钮）的单击事件冒泡
     * 在jquery中return false可阻止事件冒泡
     * 当然也可以使用其他方法，比如：event.stopPropagation()（IE中使用：event.cancelBubble=true）
     */
    return false;
});