首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

利用DOM的事件处理跟冒泡机制模拟页面锁定功能

2012-12-26 
利用DOM的事件处理和冒泡机制模拟页面锁定功能废话不多说,先贴代码:htmlheadmeta http-equivConten

利用DOM的事件处理和冒泡机制模拟页面锁定功能
废话不多说,先贴代码:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" >var open = "开启夜服";var cancel = "取消夜服";// 事件是否继续执行的标识var eventableflag = true;document.addEventListener("click", stopClick, true);function stopClick(e){e = window.event || e;var target = e.target;// 开启、关闭夜服的按钮if(target.id == "btn4"){if(target.innerHTML == open){target.innerHTML = cancel;eventableflag = false;}else{target.innerHTML = open;eventableflag = true;}}// 判断标识,决定是否让事件继续向上冒泡if(!eventableflag){e.returnValue = false;// 阻止将来事件的冒泡e.stopPropagation();return false;}else{return true;}}</script></head><button id="btn1">弹出消息1</button><button id="btn2">弹出消息2</button><button id="btn3">弹出消息3</button><button id="btn4">开启夜服</button><script type="text/javascript" >var btn1 = document.getElementById("btn1");btn1.onclick = function(){alert("click button 1");}var btn2 = document.getElementById("btn2");btn2.onclick = function(){alert("click button 2");}var btn3 = document.getElementById("btn3");btn3.onclick = function(){alert("click button 3");}</script></html>


效果:

没有开启服务时,一切正常


开启了服务时,让其它元素点击无效



当然这个只是实现了DOM的机制,没有考虑IE浏览器。 另外,这里只实现了简单的button,还有其它的如a链接等元素没有考虑,但都可以通过e.target.nodeName 或者 e.target.localName来识别

热点排行