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

无双Rama

浏览: 298629 次
性别:
来自: 西安

最近访客更多访客>>

zihai367

yksky

13593887587

yyy1394

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript

废话不多说，先贴代码：

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

效果：

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