DIV外區(qū)域Click后關(guān)閉DIV的實(shí)現(xiàn)代碼
更新時間：2011年12月21日 19:22:15 作者：
首先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發(fā)后，事件將跟隨節(jié)點(diǎn)向上傳播，直到有click事件綁定在某一父節(jié)點(diǎn)上，如果沒有將直至文檔的根
阻止冒泡：
1、stopPropagation()對于非IE瀏覽器。
2、cancelBubble屬性為true，對于IE瀏覽器，
而Jquery已經(jīng)有兼容瀏覽器的方法，event.stopImmediatePropagation();
<style>
body
{
background:black;
}
#myDiv
{
background: #fff;
width:250px;
height:250px;
display:none;
}
</style>
<div id="myDiv">
This is a div;
</div>
<input id="btn" type="button" value="顯示DIV" />
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function () {
$("#btn").click(function (event) {
showDiv();//調(diào)用顯示DIV方法
$(document).one("click", function () {//對document綁定一個影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event) {
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv() {
$(myDiv).fadeIn();
}
</script>
1、stopPropagation()對于非IE瀏覽器。
2、cancelBubble屬性為true，對于IE瀏覽器，
而Jquery已經(jīng)有兼容瀏覽器的方法，event.stopImmediatePropagation();
復(fù)制代碼 代碼如下:
<style>
body
{
background:black;
}
#myDiv
{
background: #fff;
width:250px;
height:250px;
display:none;
}
</style>
<div id="myDiv">
This is a div;
</div>
<input id="btn" type="button" value="顯示DIV" />
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function () {
$("#btn").click(function (event) {
showDiv();//調(diào)用顯示DIV方法
$(document).one("click", function () {//對document綁定一個影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event) {
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv() {
$(myDiv).fadeIn();
}
</script>
相關(guān)文章
jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
這篇文章主要介紹了通過jQuery實(shí)現(xiàn)的頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部,需要的朋友可以參考下2014-06-06
解決jquery的datepicker的本地化以及Today問題
解決jquery的datepicker的本地化以及Today問題,需要的朋友可以參考下2012-05-05
jquery簡單實(shí)現(xiàn)縱向的無縫滾動代碼實(shí)例
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)縱向的無縫滾動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解
這篇文章主要介紹了jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
重寫了昨天的圖片輪換，加入了自動切換效果，改變了布局，增強(qiáng)了可定制性，當(dāng)然，還是有點(diǎn)小小的問題，在IE 6+,chrome,firfox3.68下測試正常運(yùn)行2010-07-07
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)2017-03-03
jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架
這篇文章主要介紹了jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架 的相關(guān)資料,需要的朋友可以參考下2015-12-12
很簡單的一個效果插件,但不是經(jīng)常用,怕忘了,以后在用又要去看文檔,所以現(xiàn)在把筆記寫下來,方便以后2010-08-08
這篇文章主要介紹了Jquery實(shí)現(xiàn)遮罩層的方法,詳細(xì)的分析了jQuery實(shí)現(xiàn)遮罩層的步驟與相關(guān)技巧,需要的朋友可以參考下2015-06-06
如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能
本文通過圖文并茂的形式給大家介紹了如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能,需要的朋友可以參考下2018-05-05