一、前言
在編寫頁面的時候，我們經常使用到彈出層。對於彈出層，原本的意義就是增加與用戶的交互，提升用戶的好感度。如果彈出層都沒有較好的體驗，那何談通過交互來提升好感。。。
首先提出幾個彈出層的注意點：
- 彈出層的界面需要統一，不一致的彈出層並不能增加美感，相反還會顯得頁面布局更加雜亂無章；
- 彈出層的設計一定要好看，按鈕要符合項目的主色調；
- 彈出層的寬度固定屏幕占比，設置max-width，高度根據內容自適應；
- 點擊其他區域隱藏彈出層。。。
二、正文
今天，主要說說點擊其他區域隱藏彈出層。筆者被這個效果折磨了很久，幾乎每次實現這個效果都要查一遍資料，一次次嘗試才能達到想要的效果。如此麻煩，皆是因為對事件冒泡的理解不夠已經錯誤處理。
什么是事件冒泡？為什么要使用它？
事件冒泡：由最具體的元素接收（當前節點），然后逐級向上傳播至最不具體的元素的節點（document）；
在實現點擊其他區域隱藏彈出層時，需要對document綁定點擊事件，而事件冒泡會使點擊其它節點時仍然觸發該事件，從而造成事件沖突，導致該顯示彈出層時顯示不出，不該隱藏時卻又隱藏了彈出層。
<style type="text/css"> .layer-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content; center; align-items: center; display: none;
} .layer-main{ width: 75%; padding: 20px; max-width: 400px;
}
</style>
<body>
<button>顯示彈出層</button>
<div class="layer-container">
<div class="layer-main">
<div class="layer-header"></div>
<div class="layer-content"></div>
<div class="layer-footer">
<div class="layer-button">確認</div>
</div>
</div>
</div>
<script>
//點擊按鈕，顯示彈出層
$("button").bind("click", function(){ $(".layer-container").css("display", "flex"); event.stopPropagation();//==========阻止冒泡1
}) //點擊其他區域，隱藏彈出層
$(document).bind("click", function(){ $(".layer-container").css("display", "none"); }) //點擊彈出層內確認按鈕
$(".layer-button").bind("click", function(){ console.log("點擊了確認按鈕") }) //給彈出層綁定點擊事件，阻止冒泡
$(".layer-main").bind("click", function(){ event.stopPropagation();//==========阻止冒泡2
}) </script>
</body>
說明：
- $(document)即給整個文檔綁定點擊事件，點擊則隱藏彈出層container；
- $("button")給按鈕綁定點擊事件，點擊即顯示彈出層container；
此處必須加event.stopPropagation()阻止冒泡，否則先執行button的事件顯示彈出層container，又向上冒泡執行document事件隱藏彈出層container，導致最終點擊沒有效果； - $(".layer-main")給彈出層main綁定點擊事件，點擊它或冒泡到它時，即阻止繼續冒泡到document；
此處的點擊事件以及阻止冒泡必須加，否則點擊彈出層main或里面的其他節點，都會冒泡到document，從而隱藏彈出層container，導致事件紊亂。
其實，還可以通過事件的目標（event.target）來識別當前點擊的節點，從而進行接下來的操作，比如對指定的節點的特殊操作
==>>除指定區域外點擊任何區域都隱藏div
$('body').click(function(e) { var target = $(e.target); // 如果#layer或者#btn下面還有子元素，可使用
// !target.is('#btn *') && !target.is('#layer *')
if(!target.is('#btn') && !target.is('#layer')) { if ( $('#layer').is(':visible') ) { $('#layer').hide(); } } }); $('body').click(function(e) { if(e.target.id != 'btn' && e.target.id != 'overlay') if ( $('#layer').is(':visible') ) { $('#layer').hide(); } })
三、結語
拜拜！