Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例

更新時間：2016年06月21日 15:03:43 作者：沫魚

這篇文章主要分享一個Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例,需要的朋友可以參考下。

代碼如下，實(shí)現(xiàn)了點(diǎn)擊input顯示一個div層，當(dāng)點(diǎn)擊除input和div以外的地方的時候，隱藏div的功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>點(diǎn)擊其它地方關(guān)閉DIV</title>
</head>

<body>
<input type="text" value="" id="tf"/>
<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">
 <p>1111</p>
 <p><span>2222</span></p>
 <p><a href="#">3333</a></p>
</div>
<script>
  function e(obj){return document.getElementById(obj)}
  e('tf').onclick=function(event){
    e('con').style.display='block';
    stopBubble(event); 
    document.onclick=function(){
      e('con').style.display='none';
　　　　　　　document.onclick=null;　
    }
  }
  
  e('con').onclick=function(event){
    //只阻止了向上冒泡，而沒有阻止向下捕獲，所以點(diǎn)擊con的內(nèi)部對象時，仍然可以執(zhí)行這個函數(shù)
    stopBubble(event); 
  }
  //阻止冒泡函數(shù)
  function stopBubble(e){  
    if(e && e.stopPropagation){
      e.stopPropagation();  //w3c
    }else{
      window.event.cancelBubble=true; //IE
    }
  }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

cookie丟失問題(認(rèn)證失效) Authentication （用戶驗證信息）也會丟失
window.showModalDialog() 后 window.open() 導(dǎo)致cookie丟失問題(認(rèn)證失效) Authentication （用戶驗證信息）也會丟失
2009-06-06
JavaScript獲取中英文混合字符串長度的方法示例
這篇文章主要介紹了JavaScript獲取中英文混合字符串長度的方法,結(jié)合實(shí)例形式分析了javascript通過遍歷轉(zhuǎn)換字符串實(shí)現(xiàn)統(tǒng)計字符串長度的操作技巧,需要的朋友可以參考下
2017-02-02
js字符串轉(zhuǎn)json的三種簡單方法舉例
在很多時候我們都需要將數(shù)據(jù)轉(zhuǎn)換為JSON的格式去進(jìn)行請求,下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json的三種簡單方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對回調(diào)函數(shù)概念的理解,需要的朋友可以參考下
2014-09-09
javascript字符串對象常用api函數(shù)小結(jié)(連接,替換,分割,轉(zhuǎn)換等)
這篇文章主要介紹了javascript字符串對象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript常用的連接、替換、分割、轉(zhuǎn)換等相關(guān)函數(shù)與使用方法,需要的朋友可以參考下
2016-09-09
僅一個form表單 js實(shí)現(xiàn)注冊信息依次填寫提交功能
這篇文章主要為大家詳細(xì)介紹了僅一個form表單，JavaScript可實(shí)現(xiàn)注冊信息依次填寫提交功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
JavaScript圖像延遲加載庫Echo.js
Echo 是一個獨(dú)立的 JavaScript 懶加載圖像的工具，快速、體積小（不足1k）和使用 HTML5 的 data- 屬性，通過本文給大家介紹JavaScript圖像延遲加載庫Echo.js ，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
JS實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼
這篇文章主要為大家介紹了如何使用JavaScript實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼下載到本地，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-04-04
JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法,涉及javascript窗口交互的相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06