分類  >  Web前端 >

利用DOM的事件處理跟冒泡機制模擬頁面鎖定功能

tags:    時間:2013-12-10 08:40:42
利用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的機制,沒有考慮IE瀏覽器。 另外,這裡只實現了簡單的button,還有其它的如a鏈接等元素沒有考慮,但都可以通過e.target.nodeName 或者 e.target.localName來識別

推薦閱讀文章

Bookmark the permalink ,來源:互聯網