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

利用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 class="button1" 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的事件处理跟冒泡机制模拟页面锁定功能

开启了服务时，让其它元素点击无效
利用DOM的事件处理跟冒泡机制模拟页面锁定功能

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

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

相关推荐