JS 阻止事件冒泡、取消默认事件（默认行为）【前端小白篇】

最新推荐文章于 2024-05-18 09:25:19 发布

apjcui

最新推荐文章于 2024-05-18 09:25:19 发布

阅读量2.4k

点赞数

分类专栏： web web前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/apjcui/article/details/103597195

版权

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

1.冒泡事件

不多说直接放代码！！！

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
	<div id='box1' onClick=alert('box1点击事件')>
		<h2>box1盒子</h2>
		<div id='box2' onClick=alert('box2点击事件')>
			<h3>
				box2盒子
			</h3>
		</div>
	</div>
</head>
<body>

<script>

</script>

</body>
</html>

可以看到 id 名为 box2 和 box1 的元素均绑定了 onClick 点击事件。
当点击 box1 内的 h2 标签 “box1盒子” 时，触发alert事件，弹出框显示 “box1点击事件” ，此时并没有任何异常。
但是当点击 box2 内的 h3 标签 “box2盒子” 时，会依次先弹出 “box2点击事件”，然后弹出 “box1点击事件”。
如果多嵌套几层，会发现事件触发是从自元素依次向父元素传递的，这就是事件冒泡，像一个 “气泡” 不断从子元素向父元素冒出来。
在这里插入图片描述
可以把标签的嵌套结构想成上图的模式，最外层是最大的父元素 A区域，内部的 B区域相对于 A区域是子元素，但是他又是 C区域的父元素。
也可以从叠加关系上看，C区域整体既在 B 内，又在 A内，点击 C自然往下又点击了 B，接着点击 A，而每个区域被点击都会触发一个事件，就形成了冒泡结构。而且冒泡只能往外层冒，也就是从子元素往父元素冒。

冒泡事件的阻止

w3c 阻止冒泡方法是 e.stopPropagation()
IE 是使用 e.cancelBubble = true

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
	<div id='box1' onClick=alert('box1点击事件')>
		<h2>box1盒子</h2>
		<div id='box2'>
			<h3>
				box2盒子
			</h3>
		</div>
	</div>
</head>
<body>

<script>
	var box2 = document.getElementById('box2')
	box2.onclick = function(e) {
		alert('box2点击事件');
		var event = e||window.event;
		event.cancelBubble ? event.cancelBubble = true : event.stopPropagation();
	}
	
</script>

</body>
</html>

2.默认事件

什么是默认事件？
1.a 标签 href 属性上的跳转。
2.鼠标右键呼出菜单。
3.form 表单里 button 标签和 type属性为 submit 的 input 标签的提交。

取消默认事件

w3c 的取消默认事件方法是 e.preventDefault()
IE9 以下是使用 e.returnValue = false;

1）a 标签默认时间的取消

// aaa 为某个a标签的id名
document.getElementById("aaa").onclick = function(e){
    var event = e||window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        event.returnValue = false;
    }
}

2）右键呼出菜单默认事件的取消

document.oncontextmenu = function(e){
    var event = e||window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        event.returnValue = false;
    }
}

3）表单的默认事件——提交事件的取消
document.getElementsByClassName(“user-info”)[0].onsubmit = function(e){
var event = e || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}

3.默认行为和冒泡事件的联系

JS 的 return false 只能阻止默认行为；但是 jQuery 的 return false 既能阻止默认行为，也能阻止冒泡。

1）原生 JS，只阻止默认行为，不阻止冒泡

<div onclick=alert('222')>
	box1
	<div onclick=alert('111')>
		box2
		<a id="aaa" href="https://www.baidu.com/">百度</a>
	</div>
</div>

<script>
	document.getElementById('aaa').onclick = function(){
		return false
	}
</script>

2）jQ，既阻止默认行为，也阻止冒泡


<div onclick=alert('222')>
	box1
	<div onclick=alert('111')>
		box2
		<a id="aaa" href="https://www.baidu.com/">百度</a>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
	$("#aaa").on('click',function(){
	return false;
});
</script>

apjcui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 阻止事件冒泡、取消默认事件（默认行为）【前端小白篇】

1.冒泡事件不多说直接放代码！！！<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <div id='box1' onClick=alert('box1点击事件')> <h2...
复制链接

扫一扫