DIV外區(qū)域Click后關(guān)閉DIV的實現(xiàn)代碼
更新時間：2011年12月21日 19:22:15 作者：
首先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發(fā)后，事件將跟隨節(jié)點向上傳播，直到有click事件綁定在某一父節(jié)點上，如果沒有將直至文檔的根
阻止冒泡：
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();
復制代碼 代碼如下:
<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)文章
下面介紹30個最好的jQuery Lightbox 插件，別忘了收藏它，以防未來的設(shè)計中錯過它們中的一個。2011-04-04
jQuery創(chuàng)建插件的代碼分析，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過圖片移動特效，鼠標移動到圖片上時圖片向上動一下，等到鼠標離開后，圖片又返回到原來位置,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
很多網(wǎng)站都應用了評分效果，讓用戶可以對正在瀏覽的文章、電影、資源等進行評分，讓網(wǎng)站增添了幾分互動效果。本文將講解如何使用jQuery來實現(xiàn)評分效果。2015-05-05
淺談事件冒泡、事件委托、jQuery元素節(jié)點操作、滾輪事件與函數(shù)節(jié)流
下面小編就為大家?guī)硪黄獪\談事件冒泡、事件委托、jQuery元素節(jié)點操作、滾輪事件與函數(shù)節(jié)流。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）
之前寫的代碼，都是在當前窗口位于居中，可是一旦窗口縮小或者放大都不是位于居中的位置了，但是一直想寫的一個類似于alert彈出窗口的效果。2011-09-09
這篇文章主要介紹了Jquery取得iframe下內(nèi)容的方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jQuery 實現(xiàn)扁平式小清新導航，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細的分析了addClass()方法的實現(xiàn)技巧與相關(guān)注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jQuery的bind的函數(shù)在實際應用其實不是特別多，只是他可以綁定一個事件，但不會即時觸發(fā)，也可以通過unbind來解除綁定。2011-04-04