js 阻止元素(文档)默认事件,阻止冒泡事件

1、阻止表单的默认事件,或者在html5中文档滑动的默认事件 【event.preventDefault();】  -- 阻止元素的默认事件。

demo1-1:阻止元素类默认事件

<a href="http://www.baidu.com" target="_black">百度</a>

document.getElementByTagName("a").addEventListener("click",function(e){e.preventDefault()},false);

点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。


demo1-2:移动端中阻止document默认事件

document.ontouchmove = function(ev){
ev.preventDefault();
};

=========


2、-- 阻止元素冒泡事件【(ie:)ev.cancelBubble = true; (ff:) ev.stopPropagation(); 】;

demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#beijing{
		width: 600px;
		height: 400px;
		background: purple;
		margin: 0 auto;
	}
	#chaoyang {
		width: 500px;
		height: 300px;
		background: orange;
	}
	#niaochao{
		width: 400px;
		height: 200px;
		background: green;
	}
</style>
<script type="text/javascript">
window.onload = function(){
	document.getElementById('beijing').onclick = function(){
		alert('我是北京')
	}
	document.getElementById('chaoyang').onclick = function(e){
		alert('我是朝阳区')
		var ev = window.event || e;
		if(document.all){//阻止事件流
			ev.cancelBubble = true;
		}else{
			ev.stopPropagation();
		}
	}
	document.getElementById('niaochao').onclick = function(){
		alert('我是鸟巢')
	}
}
</script>
</head>

<body>
	<div id="beijing">
		<div id="chaoyang">
			<div id="niaochao"></div>
		</div>
	</div>
</body>
</html>




你可能感兴趣的:(冒泡事件,阻止事件,默认事件)