Javascript點擊其他任意地方隱藏關閉DIV實例
更新時間：2016年06月21日 15:03:43 作者：沫魚
這篇文章主要分享一個Javascript點擊其他任意地方隱藏關閉DIV實例,需要的朋友可以參考下。
代碼如下，實現(xiàn)了點擊input顯示一個div層，當點擊除input和div以外的地方的時候，隱藏div的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>點擊其它地方關閉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){
//只阻止了向上冒泡，而沒有阻止向下捕獲，所以點擊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代碼風格指南》，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域
- js點擊頁面其它地方將某個顯示的DIV隱藏
- js點擊彈出div層實現(xiàn)可拖曳的彈窗效果
- JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼
- JavaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例
- JS實現(xiàn)點擊按鈕控制Div變寬、增高及調(diào)整背景色的方法
- js實現(xiàn)點擊按鈕后給Div圖層設置隨機背景顏色的方法
- javascript實現(xiàn)鼠標點擊頁面 移動DIV
- javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法
- js實現(xiàn)點擊生成隨機div
相關文章
cookie丟失問題(認證失效) Authentication （用戶驗證信息）也會丟失
window.showModalDialog() 后 window.open() 導致cookie丟失問題(認證失效) Authentication （用戶驗證信息）也會丟失2009-06-06
這篇文章主要介紹了JavaScript獲取中英文混合字符串長度的方法,結合實例形式分析了javascript通過遍歷轉(zhuǎn)換字符串實現(xiàn)統(tǒng)計字符串長度的操作技巧,需要的朋友可以參考下2017-02-02
在很多時候我們都需要將數(shù)據(jù)轉(zhuǎn)換為JSON的格式去進行請求,下面這篇文章主要給大家介紹了關于js字符串轉(zhuǎn)json的三種簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09
javascript字符串對象常用api函數(shù)小結(連接,替換,分割,轉(zhuǎn)換等)
這篇文章主要介紹了javascript字符串對象常用api函數(shù),結合實例形式總結分析了javascript常用的連接、替換、分割、轉(zhuǎn)換等相關函數(shù)與使用方法,需要的朋友可以參考下2016-09-09
僅一個form表單 js實現(xiàn)注冊信息依次填寫提交功能
這篇文章主要為大家詳細介紹了僅一個form表單，JavaScript可實現(xiàn)注冊信息依次填寫提交功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
Echo 是一個獨立的 JavaScript 懶加載圖像的工具，快速、體積?。ú蛔?k）和使用 HTML5 的 data- 屬性，通過本文給大家介紹JavaScript圖像延遲加載庫Echo.js ，感興趣的朋友一起學習吧2016-04-04
JS實現(xiàn)讀取Excel文件內(nèi)容并生成二維碼
這篇文章主要為大家介紹了如何使用JavaScript實現(xiàn)讀取Excel文件內(nèi)容并生成二維碼下載到本地，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-04-04
JavaScript實現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript實現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法,涉及javascript窗口交互的相關操作技巧,需要的朋友可以參考下2017-06-06