事件冒泡与阻止-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_2179/article/details/81927978

本文介绍了如何使用JQuery为不同层级的HTML元素绑定click事件，并探讨了如何通过event.stopPropagation()和event.preventDefault()来分别阻止事件冒泡及默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码如下；

<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>

<div id="msg"></div>
</body>

JQuery代码如下；
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})

内层元素被点击了，外层元素也会捕捉到相应的事件
解决方法：
event.stopPropagation(); // 阻止事件冒泡
//不希望外层元素继续冒泡。

阻止事件的默认行为
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>

Div如下； $(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})

阻止事件默认行为和阻止冒泡事件都可以用
return false;
来完成。

事件冒泡问题