点击div以外让div消失的方法及绑定body点击事件直接触发的解决方法

本文链接：https://blog.youkuaiyun.com/weixin_44988028/article/details/100140810

本文介绍了如何使用$.contains()函数来判断点击事件是否发生在特定div内部，以实现点击div以外区域使div消失的功能。同时，针对点击显示div后点击隐藏时body click事件自动触发的问题，提出了解决方案：在目标div外添加一层div，并将点击事件绑定到外层div，从而避免事件冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用 $.contains()函数比较当前点击元素是否包含在div内。
参考链接：https://api.jquery.com/jQuery.contains/
如我们要让class为all_introducitons的模块在点击其他位置时消失，我们可以设置body的点击事件，当点击时判断当前点击的元素，即event.target，然后contains()函数就会判断，如果包含则返回true，不包含则返回false。

	<div class="all_introductions" id="all_introductions">
	//内容
	</div>

方法：

    	$('body').click(function(event){
    				var result = $.contains(document.getElementById('all_introductions'),event.target);
    				console.log(result);
    				if(result== false){
    					$('.all_introductions').css("display","none");
    				}
    			});

但当我们要点击显示div再点击隐藏时，就要在显示div后再触发body的点击事件。但这是就会发生body的click事件自动触发的问题，如我想点击li元素显示div后再触发body事件（body事件存在count()函数内），但此时会直接触发body的click事件，div无法显示出来。

$('.item li').click(function(){			
			$('.all_introductions').css("display","block");
			count();
		});

研究后发现研究方法，在该div外加一层div，并将点击事件绑定在外层的div上，就不会存在问题：
html部分：

<div class="blackground" id="blackground">
	<div class="all_introductions" id="all_introductions">
    	//内容
    </div>
  </div>

script部分：

$('#blackground').click(function(event){
	var result = $.contains(document.getElementById('all_introductions'),event.target);
	console.log(result);
	if(result== false){
		$('.blackground').css("display","none");
	}
});