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;
来完成。
分享到：
相关推荐
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时，阻止这个滚动事件向上传递到其他元素或窗口，特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为，它在用户滚动...
总之，要解决jQuery中`.on()`事件冒泡问题，推荐的方法是将事件处理器绑定到离目标元素最近的父元素上，并在需要阻止冒泡的情况下，在事件处理函数中调用`e.stopPropagation()`方法。这样做既可以提高程序的性能，也...
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...
在JavaScript的DOM编程中，事件冒泡是一个非常重要的概念，尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
通过阅读源码，开发者可以更深入地理解事件冒泡的工作原理，从而优化性能或解决兼容性问题。 至于标签"工具"，可能是指有一些开发工具可以帮助我们调试和观察事件冒泡的过程。例如，浏览器的开发者工具提供了事件...
总结一下，JavaScript事件冒泡是浏览器中处理用户交互的重要机制，但它在不同浏览器间存在兼容性问题。通过使用DOM2级事件接口和编写兼容性代码，可以有效地管理这些差异，确保在各种浏览器环境下都能正确处理事件。...
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件（案例）;2、键盘事件;2、键盘事件（案例）;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;...3、事件的冒泡与阻止
为了取消div元素的单击事件冒泡，代码中使用了even.cancelBubble = true;语句。本段代码适合HTML初学者学习。关键词：事件冒泡、取消冒泡、单击事件。用途：学习如何使用JavaScript取消HTML事件的冒泡。
这种方式使得在事件到达目标元素之前，可以在更高级别的元素上有机会处理事件，这对于全局事件监听或者防止事件冒泡可能带来的问题很有用。 在JavaScript中，我们可以使用`addEventListener`方法来添加事件监听器，...
通过上述三种方法，开发者可以根据实际需求选择合适的方式来处理事件冒泡问题。在某些情况下，可能只需要阻止默认行为，而允许事件继续冒泡；在其他情况下，则可能需要同时阻止默认行为和事件冒泡。 文章中还提到了...
1. **创建VI**：首先，新建一个VI，命名为"事件冒泡排序.vi"。在前面板上，添加一个数组控件用于输入待排序的数据，再添加一个数组指示器用于显示排序后的结果。 2. **设计程序框图**：在程序框图中，首先创建一个...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
在JavaScript的世界里，事件冒泡是一个重要的概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。jQuery库提供了方便的方式来处理DOM...