快顯功能表 阻止冒泡

標籤：lock   click   isp   display   type   rip   事件   doc   jquer   

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>快顯功能表，阻止冒泡</title>
<style>

</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("button").click(function(ev){
$("div").css("display","block");
ev.stopPropagation();//阻止冒泡（子級發生事件的時候往父級傳遞，導致父級的事件也同時發生）
//return false; 同時阻止冒泡和預設事件
});
$(document).click(function(){
$("div").css("display","none");
});
});
</script>
</head>
<body>
<button>點擊</button>
<div style="width:200px;height:200px;background:pink;display:none;"></div>
</body>
</html>
補充：document是整個文檔最頂層的父節點，所以在document上加事件時，不管點擊網頁的什麼地方都可以觸發。

 

快顯功能表 阻止冒泡