利用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>