前端開發：使用jQuery實作點擊div以外的地方來關閉它

在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能：點擊元件外部來關閉元件。在接下來的範例中，我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。

首先、我們先準備好html的部份，我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下，點擊div以外的地方就可以隱藏它。

HTML

<button id="btn">Click here to show or hide</button>
 
<div id ="content" style="display:none">Click outside to hide me</div>

JS

// 點擊畫面DIV以外的任何地方就隱藏DIV
$("body").click(function(){
  $("#content").hide();
});
 
// 點擊DIV時、不向上層冒泡。
$("#content").click(function(e){
  e.stopPropagation();
});
 
// 點擊按鈕時顯示或隱藏DIV
$("#btn").click(function(e){
  e.stopPropagation();
  $("#content").toggle();
});

codepen 範例：https://codepen.io/ellen-shih/pen/WNRGePv

第二種寫法

JS

// 點擊畫面DIV和按鈕以外的任何地方就隱藏DIV
$("body").click(function(e){  
    var container = $("#content");
    var btn = $("#btn");
    // 判斷點擊的地方不是DIV或按鈕
    if(!container.is(e.target) &&
       !container.has(e.target).length &&
       !btn.is(e.target) &&
       !btn.has(e.target).length
      ){
        container.hide();
    }  
});
 
// 點擊按鈕時顯示或隱藏DIV
$("#btn").click(function(e){
  //e.stopPropagation();
  $("#content").toggle();
});

codepen 範例：https://codepen.io/ellen-shih/pen/xxgEbGv

方法大家都學起來了嗎～以上就是本篇的介紹呦！喜歡歐斯瑞文章以及還未追蹤我們粉絲團的讀者們，趕緊到歐斯瑞FB粉絲團與IG按下追蹤，也別忘了訂閱電子報，就不會錯過第一手新知分享囉！有問題也歡迎隨時聯繫我們，下次見囉！