jQuery点击其他地方时菜单消失的实现方法

介绍jQuery：点击之外，菜单如何消失

你是否曾遇到过这样的情况，当你点击一个div显示菜单后，再点击其他地方，菜单却仍然顽固地停留在那里？今天，我将带你使用jQuery实现点击其他地方时菜单消失的技巧。

我们来理解背后的原理。当你给document绑定click事件时，如果点击的是div，就会显示菜单；但如果点击的是document的其他部分，就会隐藏菜单。如果你点击的是div，同时又会触发document的click事件，因此需要在div的点击事件中阻止事件的进一步传播，也就是所谓的“冒泡”。

这里有一个实用的方法，给事件对象使用特定的属性来实现这一功能。在非IE浏览器中，可以使用`e.sPropagation()`来阻止事件冒泡；而在IE浏览器中，则可以通过设置`e.cancelBubble = true`来实现。

现在让我们通过一个具体的实例来展示这个过程：

```javascript

$(document).ready(function(){

// 阻止事件冒泡的函数

function stopPropagation(e) {

if (e.stopPropagation)

e.stopPropagation(); // 非IE浏览器

else

e.cancelBubble = true; // IE浏览器

}

// 当点击document时隐藏菜单

$(document).click(function(){

$('test').hide(); // 将id为test的元素隐藏

});

// 当点击id为test的元素时显示菜单，并阻止事件冒泡到document的click事件上

$('test').click(function(e){