JQuery控制div外点击隐藏而div内点击不会隐藏的方

掌握JQuery：实现Div内外点击的精准控制

你是否曾遇到过这样的需求：一个div，在外点击时隐藏，但在div内部点击时却保持显示状态？今天，我们就来如何利用jQuery的show、hide以及事件传播方法来实现这一功能。

设想我们有一个id为“body”的div元素。为了实现这一功能，我们可以按照以下步骤进行编程：

第一步，我们需要给这个div添加一个点击事件监听器。当在div内部点击时，我们需要阻止事件的进一步传播，以防止触发外部的点击事件。这可以通过jQuery的event.stopPropagation()方法实现。代码如下：

```javascript

$("body").click(function(e) {

e.stopPropagation(); //阻止事件冒泡到外部

});

```

第二步，我们需要给整个文档添加一个点击事件监听器，当在div外部点击时，隐藏这个div。由于我们在div内部点击时阻止了事件的进一步传播，所以这一步不会影响到div内部的点击。代码如下：

```javascript

$(document).click(function() {

$("body").hide(); //在div外部点击时隐藏div

});

```

如果你希望在div内部点击时也隐藏div，你可以使用jQuery的trigger方法手动触发一次点击事件。代码如下：

```javascript

$(document).trigger("click"); //触发一次点击事件，实现div内部点击隐藏

```