jQuery點選頁面其他地方隱藏顯示的元素

admin發表於2017-11-01
jQuery

在實際應用中，可能有這樣的效果，那就是有這樣一個彈出層，點選層本身的時候，這個層不會隱藏，而點選除去層之外的頁面其他地方則會將這個層隱藏，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{background-color:#999999;}
#thediv{
  background-color:#FFFFFF;
  width:250px;
  height:250px;
  display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  var odiv=$("#thediv");
  $("#bt").click(function(event){
    showDiv();
    $(document).one("click",function(){
      odiv.hide();
    });
    event.stopPropagation();
  });
  odiv.click(function(event){
    event.stopPropagation();
  })
  function showDiv(){
    odiv.fadeIn();
  }
})
</script>
</head>
<body>
<input id="bt" type="button" value="顯示元素" />
<div id="thediv">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.var odiv=$("#thediv")，獲取div元素物件。

3.$("#bt").click(function(event){})，為按鈕註冊click事件處理函式，事件處理函式的引數是事件物件。

4.showDiv()，呼叫此函式可以顯示div元素。

5.$(document).one("click",function(){odiv.hide();})，為document註冊click事件處理函式，事件處理函式可以將指定的div元素隱藏。

6.event.stopPropagation()，用來阻止事件冒泡，否則點選事件冒泡到文件，那麼div元素顯示後又會瞬間被隱藏。

7.odiv.click(function(event){event.stopPropagation();})，為div元素註冊click事件處理函式，這裡目的其實就是為了組織事件冒泡。

8.function showDiv(){odiv.fadeIn();}，呼叫此函式可以隱藏div。

二.相關閱讀:

1.click事件參閱jQuery click事件一章節。 

2.one()參閱jQuery one()方法一章節。

3.stopPropagation()參閱jQuery event.stopPropagation()方法一章節。

4.fadeIn()參閱jQuery fadeIn()方法一章節。

相關文章