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();
});