事件冒泡和捕获

最新推荐文章于 2017-10-28 00:08:09 发布

ilvseyinfu

最新推荐文章于 2017-10-28 00:08:09 发布

阅读量201

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_31751569/article/details/78128247

版权

Web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

图码结合，很清晰～

<!DOCTYPE html>
<html>
	<head></head>
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<body>

		<div class="father" style="width:300px;height:300px;background-color:pink;position:relative">
			<div class="son" style="width:50px; height:50px; background-color:red;position:absolute;margin:auto;left:0;right:0;top:0;bottom:0">
				<a id="a1" href="http://liuyixiang.cn">Hello !</a>
			</div>
		</div>
		<script type="text/javascript">

				
				document.getElementsByClassName("father")[0].addEventListener("click",function(){
					alert("father");
				},false);

				document.getElementsByClassName("son")[0].addEventListener('click',function(e){
					alert("son");
					// 如果你想阻止冒泡，这是w3c的写法
					//在IE下设置cancelBubble = true；
					e.stopPropagation();
					alert("事件冒泡已经被阻止了");

				},false);

				document.getElementById("a1").addEventListener('click',function(e){
					alert("这是一个超链接");
					// 阻止事件的默认行为／例如：阻止a跳转
					// 在IE下设置window.event.returnValue = false;
					e.preventDefault();
				},false);
				//当第三个参数为 false 时，默认是发生冒泡。
				//true 为捕获,默认为false，即冒泡
				


		</script>

	</body>
</html>

ilvseyinfu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡和捕获

图码结合，很清晰～ Hello ! document.getElementsByClassName("father")[0].addEventListener("click",function(){ alert("father"); },false); document.getEl
复制链接

扫一扫