事件流阻止元素默认事件

时间：6年前阅读：4907

1、事件流

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding:0 ;    
				margin: 0;    
			}    
			#beijing{    
				width: 800px;    
				height: 500px;    
				background: mediumorchid;    
			}    
			#chaoyang{    
				width: 500px;    
				height: 400px;    
				background: orange;    
			}    
			#shunbailu{    
				width: 350px;    
				height: 300px;    
				background: palegreen;    
			}    
		</style>    
		<script type="text/javascript">    
//			冒泡型事件流是由最明确的事件源到不明确的事件源依次触发.离鼠标越近,就表示越明确    
			window.onload = function(){    
				document.getElementById('beijing').onclick = function(){    
					alert('北京');    
				}    
				document.getElementById('chaoyang').onclick = function(e){    
					alert('朝阳');    
//					在这里阻止事件流代码,后面的一次就不弹出来了    
					var dd = window.event  || e;    //获得对象    
//					判断浏览器,因为IE和W3C的支持代码不同    
					if (document.all) {    
//						IE方法  阻止事件流  在这个的后续就不显了    
						dd.cancelBubble = true;    
//						W3C方法  阻止事件流    
					}else{    
						dd.stopPropagation();    
					}    
				}    
				document.getElementById('shunbailu').onclick = function(){    
					alert('顺白路');    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<div id="beijing">北京    
		<div id="chaoyang">朝阳    
		<div id="shunbailu">顺白路</div>    
		</div>    
		</div>    
	</body>    
</html>

2、阻止元素默认事件

方法（1）

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
				dd.onclick = function(e){    
					alert('点击了优酷');    
//					获得事件对象    
					var tt = window.event || e;    
//					浏览器判断    阻止浏览器默认的(后续)事件    
					if (document.all) {    
						tt.returnValue = false;   //IE    
					} else{    
						tt.preventDefault();   //W3C    
					}    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<a href="http://baidu.com" id="dd">优酷</a>    
		<!--阻止浏览器事件一般用在 a标签，和submit这个提交按钮里-->    
		<!--<form action="">    
			<input type="submit" name="" id="" value="" />    
		</form>-->    
	</body>    
</html>

方法（2）

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript">    
		window.onload = function(){    
		var dd = document.getElementById('dd');    
		dd.onclick = function(){    
		alert('点击了优酷');    
		}    
				}    
		</script>    
	</head>    
	<body>    
		<!--如果写一个javascript就会执行js代码了，就不会点击跳转了-->    
		<!--void(0)这个是一个固定写法-->    
		<a href="javascript:void(0)" id="dd">优酷</a>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

事件流 阻止元素默认事件

网友评论

事件流阻止元素默认事件