js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域

更新時(shí)間：2014年06月30日 09:08:03 投稿：whsnow

這篇文章主要介紹了通過js實(shí)現(xiàn)點(diǎn)擊div區(qū)域外隱藏div區(qū)域，原理及示例代碼如下

首先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發(fā)后，事件將跟隨節(jié)點(diǎn)向上傳播，直到有click事件綁定在某一父節(jié)點(diǎn)上，如果沒有將直至文檔的根。

阻止冒泡：1、stopPropagation()對于非IE瀏覽器。2、cancelBubble屬性為true，對于IE瀏覽器，

而Jquery已經(jīng)有兼容瀏覽器的方法，event.stopImmediatePropagation();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}

#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="顯示DIV" />

<div id="myDiv">
This is a div;
</div>

</body>

<script type="text/javascript">
　　　　var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event) 
{
showDiv();//調(diào)用顯示DIV方法
$(document).one("click", function () 
{//對document綁定一個(gè)影藏Div方法
$(myDiv).hide();
});

event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event) 
{

event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showDiv() 
{
$(myDiv).fadeIn();
}
</script>

您可能感興趣的文章:

相關(guān)文章

使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)連接狀態(tài)的幾種方法
本篇文章主要介紹了使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的幾種方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學(xué)習(xí)function的定義有所幫助
2013-05-05
Promise面試題詳解之控制并發(fā)
promise面試中經(jīng)常會(huì)遇到的一個(gè)問題就是關(guān)于控制并發(fā)的，所以下面這篇文章主要給大家介紹了關(guān)于Promise面試題之控制并發(fā)的相關(guān)資料，需要的朋友可以參考下
2021-05-05
微信小程序CSS3動(dòng)畫下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了微信小程序CSS3動(dòng)畫下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
JS中使用new Date(str)創(chuàng)建時(shí)間對象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下
2016-12-12
JS無限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于JS無限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
js實(shí)現(xiàn)簡單折疊、展開菜單的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡單折疊、展開菜單的方法,涉及javascript動(dòng)態(tài)操作頁面元素變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
數(shù)組方法解決JS字符串連接性能問題有爭議
大多數(shù)情況下，加法運(yùn)算符是首選；如果用戶主要使用IE6或7，并且字符串大小較大或數(shù)量較多時(shí)，那么數(shù)組技術(shù)就很值得。
2011-01-01
深入淺析JavaScript中的RegExp對象
正則表達(dá)式（regular expression）是一種表達(dá)文本模式（即字符串結(jié)構(gòu)）的方法，有點(diǎn)像字符串的模板，常常用作按照“給定模式”匹配文本的工具。下面通過本文給大家分享js 中的regexp對象，需要的朋友參考下吧
2017-09-09
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03