js 阻止元素（文档）默认事件，阻止冒泡事件

最新推荐文章于 2024-06-20 07:32:02 发布

kongjiea

最新推荐文章于 2024-06-20 07:32:02 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签：阻止事件默认事件冒泡事件

本文链接：https://blog.csdn.net/kongjiea/article/details/30234285

版权

javascript 专栏收录该内容

87 篇文章 2 订阅

订阅专栏

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

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

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>