js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域
首先看下JS的事件模型,JS事件模型為向上冒泡,如onclick事件在某一DOM元素被觸發(fā)后,事件將跟隨節(jié)點(diǎn)向上傳播,直到有click事件綁定在某一父節(jié)點(diǎn)上,如果沒有將直至文檔的根。
阻止冒泡:1、stopPropagation()對(duì)于非IE瀏覽器。2、cancelBubble屬性為true,對(duì)于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 () {//對(duì)document綁定一個(gè)影藏Div方法 $(myDiv).hide(); }); event.stopPropagation();//阻止事件向上冒泡 }); $(myDiv).click(function (event) { event.stopPropagation();//阻止事件向上冒泡 }); }); function showDiv() { $(myDiv).fadeIn(); } </script>
- js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁面實(shí)現(xiàn)代碼
- JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實(shí)例
- Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例
- JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法
- js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面 移動(dòng)DIV
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
- js實(shí)現(xiàn)點(diǎn)擊生成隨機(jī)div
相關(guān)文章
JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實(shí)例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01javascript截取字符串(通過substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06符合W3C Web標(biāo)準(zhǔn)的圖片連續(xù)無間隙水平滾動(dòng)
很久以前就有這個(gè)問題,總是找不到通用的,或比較簡單的“圖片連續(xù)無間隙向左滾動(dòng),無間隙向右滾動(dòng),符合W3C Web標(biāo)準(zhǔn)”2008-06-06JS IOS/iPhone的Safari瀏覽器不兼容Javascript中的Date()問題如何解決
這篇文章主要介紹了JS IOS/iPhone的Safari瀏覽器不兼容Javascript中的Date()問題的解決方案,非常不錯(cuò),感興趣的朋友參考下吧2016-11-11理解 JavaScript Scoping & Hoisting(二)
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對(duì)于有經(jīng)驗(yàn)的程序員來說這只是小菜一碟,不過我還是順著初學(xué)者常見的思路做一番描述2015-11-11iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06