`
jxqc_job
  • 浏览: 529 次
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
禁用鼠标点击事件 禁用鼠标点击事件
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Wheel</title>
</head>
<body id="bodyMe" onload="loadDiv()">
	<div id="canvas" width="200" height="200" style="background-color:green;" onclick="clickMe()"><br /><br /></div>
	<input type="button" id="divContrlButton" value="禁用div的点击事件" onclick="clickBtn()"/>
	
	<!--阻止冒泡事件-->
	<div id="c1" onclick="c()"  width="200" height="200" style="background-color:pink;">
		<br /><br />
		<div id="c2" onclick="c2()"  width="200" height="100" style="background-color:green;">
			<input type="button" id="c3" value="点击" onclick="alert(3)">
		</div>
	</div>
	
	
	<script type="text/javascript">
	    var dflag = true;
		function clickMe(){
			alert("click ...");
		}
		function clickBtn(){
			if(dflag){ //可拖动div
				//document.getElementById("canvas").onclick=function clickMe(){return true;};
				document.getElementById("canvas").onclick="event.cancelBubble = true";
				dflag = false;
				document.getElementById("divContrlButton").value="启用div的点击事件";
				document.getElementById("bodyMe").onload=loadDiv;
			}else{ //可点击div
				document.getElementById("canvas").onclick=clickMe;
				dflag = true;
				document.getElementById("divContrlButton").value="禁用div的点击事件";
				//document.getElementById("bodyMe").onload=function(){return true;};
				document.getElementById("bodyMe").onload="event.cancelBubble = true";
			}
			
		}
		function loadDiv(){
			alert("loading.....");
			alert("load done。。。")
			document.getElementById("canvas").onclick="event.cancelBubble = true";
				dflag = false;
				document.getElementById("divContrlButton").value="启用div的点击事件";
				document.getElementById("bodyMe").onload=loadDiv;
		}
		document.getElementById('c2').addEventListener('click',function(e){e.stopPropagation()},false);
		document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);
		function c(){
			alert("1")
		}
		function c2(){
			alert("2");
		}
	</script>
</body>
</html>
Global site tag (gtag.js) - Google Analytics