js怎么实现点击div区域外任意位置,使这个div隐藏?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js怎么实现点击div区域外任意位置,使这个div隐藏?相关的知识,希望对你有一定的参考价值。

用的jquery,本身这个div是点击另一个按钮用的toggle(),来显示和隐藏的,现在我想让鼠标点击div区域外任意地方都把这个div隐藏,请问怎么实现好呢?谢啦

参考技术A 我觉得可以给表单加上事件,但是这样会不会点击这个div时也会隐藏呢,没有测过,只是个人见解,希望能帮到你本回答被提问者采纳

jQuery实现鼠标点击Div区域外隐藏Div

 

冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(摘自网络)

 

1. 阻止事件冒泡, 并不阻止事件行为:event.stopPropagation();

$(function() {
	$("#link").click(function(event) {
		event.stopPropagation();
	});
});

2. 阻止事件行为,并阻止事件冒泡 :event.preventDefault();

$(function() {
	$("#link").click(function(event) {
		event.preventDefault(); 
	});
});

3. 阻止事件冒泡, 也阻止事件行为:return false;

$(function() {
	$("#link").click(function(event) {
		return false;
	});
})



阻止事件冒泡:
$("#btn").click(function (event) { 
	$("#demo").fadeIn(); 
	$(document).one("click", function () {//对document绑定一个影藏Div方法 
		$("#demo").hide(); 
	});
	event.stopPropagation();//点击Button阻止事件冒泡到document 
}); 
$("#demo").click(function (event) { 
	event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document 
}); 
 

例子:

 
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div>


$(".a").on("click", function(e){
    if($(".menu").is(":hidden")){
        $(".menu").show();
    }else{
        $(".menu").hide();
    }

    $(document).one("click", function(){
        $(".menu").hide();
    });

    e.stopPropagation();
});
$(".menu").on("click", function(e){
    e.stopPropagation();
});

以上是关于js怎么实现点击div区域外任意位置,使这个div隐藏?的主要内容,如果未能解决你的问题,请参考以下文章

js如何实现:在页面中任意位置点击鼠标,则在该位置显示一个div

如何在鼠标点击div区域外执行函数

jQuery实现鼠标点击Div区域外隐藏Div

怎么用js实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div

js 怎样使div无法响应点击事件

js或者jQuery怎样得到指定div下的指定a标签