<!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)文章

JS訪問對象兩種方式區(qū)別解析
這篇文章主要介紹了JS訪問對象兩種方式區(qū)別解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-08-08
微信小程序組件化開發(fā)的實戰(zhàn)步驟
雖然小程序在剛推出時是不支持組件化的,但如今小程序開始支持自定義組件開發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開發(fā)的相關(guān)資料,需要的朋友可以參考下
2022-09-09
countup.js實現(xiàn)數(shù)字動態(tài)疊加效果
這篇文章主要為大家詳細(xì)介紹了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
通俗易懂地解釋JS中的閉包
本文通過示例代碼給大家介紹了js中的閉包，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2017-10-10
webpack中的模式(mode)使用詳解
這篇文章主要介紹了webpack中的模式(mode)使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
javascript屏蔽右鍵代碼
屏蔽右鍵在某些特殊的情況下還是比較有用的，下面與大家分享個常用的屏蔽方法
2014-05-05
用Fundebug插件記錄網(wǎng)絡(luò)請求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請求異常的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
layui使用label標(biāo)簽的方法
今天小編就為大家分享一篇layui使用label標(biāo)簽的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript如何實現(xiàn)數(shù)組內(nèi)的值累加
我們會經(jīng)常在開發(fā)過程中,需要獲取數(shù)組中的值累加,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何實現(xiàn)數(shù)組內(nèi)的值累加的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-11-11
JSDoc 介紹使用規(guī)范JsDoc的使用介紹
JsDoc Toolkit 是一個把js描述格式化成文檔的工具。開發(fā)者只需按JsDoc的規(guī)范寫好注釋就可以很方便導(dǎo)出文檔。它是google 推薦的 JsDoc生成工具。
2011-02-02