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