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

最新推荐文章于 2022-04-13 10:42:23 发布

乐邦666

最新推荐文章于 2022-04-13 10:42:23 发布

阅读量138

点赞数

分类专栏： JavaScript 文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/zyy_jay/article/details/84370815

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

废话不多说，先贴代码：


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

效果：

没有开启服务时，一切正常
[img]http://dl.iteye.com/upload/attachment/0078/2594/969cc864-4788-3e14-92f9-588084cc4f50.png[/img]

开启了服务时，让其它元素点击无效
[img]http://dl.iteye.com/upload/attachment/0078/2596/4c2cb80f-f617-32bd-95c9-0df96de05768.png[/img]

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