jquer事件冒泡

最新推荐文章于 2024-04-04 00:19:46 发布

cccBtrya

最新推荐文章于 2024-04-04 00:19:46 发布

阅读量341

点赞数

分类专栏： study jquery 文章标签： jquery

本文链接：https://blog.csdn.net/cccBtrya/article/details/81064344

版权

study 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

什么是事件冒泡?

先初始化页面，页面代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
#content{
	background: #ccc;
}
#content span{
	background: yellow;
	margin: 5px 10px;
}
#msg{
	background: blue;
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(function( ) {
	//为span元素绑定click事件
	$('span').bind('click',function() {
		var txt=$('#msg').html()+"<p>内层span元素被单击</p>";
		$('#msg').html(txt);
	});
	//为div元素绑定clcik事件
	$('#content').bind('click',function(){
		var txt=$('#msg').html()+"<p>外层span元素被单击</p>";
		$('#msg').html(txt);
	});
	//为body元素绑定click事件
	$('body').bind('click',function(){
		var txt=$('#msg').html()+"<p>body元素被单击</p>";
		$('#msg').html(txt);
	});
});
</script>
<body>
<div id="content">
	外层div元素<br/>
	<span>内层span元素</span><br/>
	外层div元素<br/>
</div>
<div id="msg"></div>
</body>
</html>

页面效果如图所示

当我单击内层的span元素的时候，输出记录：

即元素的clcik事件会按照以下顺序来“冒泡”：

<span>
<div>
<body>

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果，比如你只想触发span的click效果，却会无意中触发其外层的div的click效果，这样就很麻烦了，所以，有必要对事件的作用范围进行限制。

如何停止事件冒泡？

停止事件冒泡只需要为函数添加一个参数，并使用jquey中提供的stopPropagation()方法即可。jquey代码如下：

$('span').bind('click',function(event) {
	var txt=$('#msg').html()+"<p>内层span元素被单击</p>";
	$('#msg').html(txt);
	event.stopPropagation();
});

我们可以看到使用这个方法之后，单击内层span元素便实现了我们想要的效果

阻止默认行为

和事件冒泡比较相同的是阻止默认行为，举个例子：

比如你有一个表单，但是当输入的内容不符合要求的时候是不允许提交的，这时候就需要阻止默认行为(提交)。

jquery为我们提供了preventDefault()方法来阻止元素的默认行为。

看个效果吧，代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(function() {
	$("#sub").bind('click',function(event){
		var username=$('#username').val();
		if(username==""){
			$("#msg").html("<p>文本框的值不能为空</p>");
			event.preventDefault();
		}
	});
});
</script>
<body>
<form action="jqtest.html">
	用户名：<input type="text" id="username"/><br/>
	<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>

当用户名为空的时候点击提交按钮会出现以下提示，且表单不能提交。

如何简写停止冒泡与阻止默认行为的方法

很简单。。

把原来的event.stopPropagation();或event.preventDefault();改写成return false;即可。

顺带一提：事件捕获

事件捕获与冒泡相反，冒泡由内向外，捕获由外向内，比如上文提到的：

即元素的clcik事件会按照以下顺序来“冒泡”：

<span>
<div>
<body>

捕获与之相反，变成：

<body>
<div>
<span>

暂时总结到这里。

cccBtrya

关注

0
点赞
踩
0

收藏

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

什么是事件冒泡?先初始化页面，页面代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style&gt;*{ margin: 0; padding:
复制链接

扫一扫

专栏目录