新手指南js點擊彈出層以外的地方關閉層-js教程-網頁制作

香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 js點擊彈出層以外的地方關閉層-js教程-網頁制作
您正在討論區的: js點擊彈出層以外的地方關閉層-js教程-網頁制作
查看: 94|回復: 0
收起左側

js點擊彈出層以外的地方關閉層-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

今天工作需要我們需要做一個彈出層,然後我們不單可以點擊關閉按鈕可以關閉層,同樣點擊彈出層以外任何地方都可以關閉彈出層。
我們在web前端開發的過程中,常常會遇到這樣的效果,就是我們點擊某個元素讓層出現,而點擊層以外的地方層隱藏,而小編在平時開發過程中也遇到過這樣的問題,通過自己的實踐得到一個比較好的方法,今天給大家說一說,為了讓大家看的清楚,我直接以實例說明。
一.要用到的知識
1.事件冒泡
2.事件對象(e.target和e.srcElement)
二.實例
html代碼:
代碼如下復制代碼



js代碼︰
代碼如下復制代碼
window.onload=function()
{
var oDiv=document.getElementById(「div1″);
var oBtn=document.getElementById(「btn」);
document.onclick=function(ev)
{
var e=ev||event;
var target=e.target||e.srcElement;
if(e.target.id!=』div1′)//事件對象
{
oDiv.style.display=」none」;
}
}
oBtn.onclick=function(ev)
{
var e=ev||event;
oDiv.style.display=」block」;
if(e && e.stopPropagation){//阻止冒泡
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
}
}
例2
代碼如下復制代碼




點擊文字彈出層





javascript:void(0);" >關閉

謝謝光臨……




彈出按鈕



[/td] [/tr]        [/table]





系統自動相關推薦tag:forum,交友,alexa



上一篇︰js中offsetLeft,offsetTop,offsetParent詳解-js教程-網頁制作
下一篇︰解決iframe高度自適應各種方法-js教程-網頁制作
+10
如您覺得" js點擊彈出層以外的地方關閉層-js教程-網頁制作 "很膠,請share出去
您正在回覆: js點擊彈出層以外的地方關閉層-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走
勿為一時快錢 漠視援交風險

閱讀版|閱讀版大量|純文字網頁|香港交友討論區

Copyright © 香港交友討論區HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|論壇聯絡
HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 24-2-2018 09:46 AM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat