jquery取消事件冒泡的三种方法展示
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止冒泡</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
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);
});
})
</script>
</head>
<body>
问题一：当我们点击“span”时会触发“div”和“body”的事件，如何只触发单一点击事件不触发到父节点点击事件呢？修改：在各点击事件结尾加上stopPropagation()会阻止触发上一节点事件;
修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
event.stopPropagation()
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation()
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>
<div id="msg"></div>
</body>
</html>
问题二：表单没有通过验证阻止表单提交，这时候可以通过设置event.preventDefault(); 阻止默认行为 ( 表单提交 )。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script>
$(function(event){
$("form").submit(function(){
if($("input[name='username']").val()==''){
event.preventDefault();
$("#msg").html("<p>文本框的值不能为空.</p>");
alert("123")
}
})
})
</script>
</head>
<body>
<form action="www.baidu.com">
<input name="username">
<input type="submit" value="提交">
</form>
<div id="msg"></div>
</body>
</html>
第三种阻止冒泡方式 return false：实际上这个很通用但是内部是执行了 (1)event.preventDefault();
(2)event.stopPropagation();
(3)停止回调函数执行并立即返回;这三个动作我们需要根据实际情况选择阻止冒泡的方式
分享到：
相关推荐
jQuery的核心是利用JavaScript的事件处理机制，为开发者提供了一种更加简便的方法来处理事件。事件是当用户或浏览器自身执行某些操作时发生的动作，如点击、提交表单、鼠标悬停等。 事件绑定是将特定的JavaScript...
综上所述，jQuery中的事件冒泡和阻止默认行为是前端开发中经常遇到的两种情况。合理地使用`stopPropagation()`和`preventDefault()`这两个方法，可以帮助我们编写出更为丰富和动态的Web应用。掌握这些概念和技巧，...
以下是一个jQuery示例，展示了如何阻止事件冒泡和默认行为： ```html * {margin: 0;padding: 0;} .father {width: 400px;height: 400px;background-color: brown;} .son {width: 200px;height: 200px;...
- **3.2.2 简写的事件**：介绍如何使用jQuery的简写方法来处理事件。 - **3.3 复合事件**： - **3.3.1 显示和隐藏高级特性**：讲解如何使用jQuery来控制元素的可见性。 - **3.3.2 突出显示可单击的项**：演示如何...
6. **事件解除与阻止**：`unbind()`方法用于删除已经绑定的事件处理程序，而`event.preventDefault()`和`event.stopPropagation()`则分别用于取消事件的默认动作和阻止事件向上冒泡到其他元素。 举例来说，下面的...
除了`.bind()`方法外，jQuery还提供了其他几种方式来绑定事件，它们分别是： - **直接在HTML标签中使用事件属性**：这是一种传统的方法，直接在HTML元素中使用事件属性（如onclick、onmouseover等），然后在属性值...
在前端开发中，事件处理是构建...总的来说，jQuery的事件处理机制使得开发者能够以一种更简单、更优雅的方式来处理复杂的事件逻辑。通过深入理解这些机制和方法，开发者可以更加高效地利用jQuery来进行前端开发工作。
因此，可以使用jQuery的事件委托机制，如`.on()`，在父级元素上监听事件，通过事件冒泡来处理子元素的交互。 6. **Ajax交互**：在实际应用中，购物车操作可能需要与服务器进行通信，比如更新购物车状态或请求商品...
`$(document).ready()`有三种书写形式： - `$(document).ready(function() { /* code here */ });` - `$().ready(function() { /* code here */ });` - `$(function() { /* code here */ });` 2. **事件捕获与...
在IT行业中，jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个"jQuery点击选中列表样式代码.zip"压缩包中，包含了一个实现列表项点击选中效果的示例。这个效果...
这可以通过阻止事件冒泡或修改插件的默认行为来实现。例如，通过`event.stopPropagation()`阻止点击事件向父元素传播，或者在插件配置中设定保持弹窗打开的选项。 以下是一段示例代码，展示了如何使用jQuery创建一...
7. **防止冒泡**：在事件处理中，我们可能需要防止事件冒泡，以免影响到其他元素。这可以通过`event.stopPropagation()`来实现。 8. **增强用户体验**：为了提高用户体验，可以添加一些额外的功能，如输入验证、...
总结起来，这个"jQuery支持多选三级联动菜单选中赋值代码"是一个结合了DOM操作、事件处理、数据管理和用户交互的复杂示例，展示了jQuery在增强网页互动性和用户体验方面的强大能力。通过理解并实践这个案例，开发者...
- **事件冒泡与阻止默认行为**：使用`.stopPropagation()`防止事件向上冒泡到父元素，避免意外触发其他事件。如果需要阻止浏览器的默认行为（如链接跳转），可以使用`.preventDefault()`。 4. **投票逻辑**： - *...
3. **排序算法**：可以使用快速排序、冒泡排序等常见算法，但通常会使用更优化的方法来处理DOM操作，减少性能影响。 4. **多列排序**：支持多个排序条件，用户可以通过设置多个列的排序标志来实现。 5. **排序方向**...
`event.stopPropagation()`是jQuery中的一个事件方法，用于阻止事件（比如点击）继续在DOM树中传播。默认情况下，当一个事件在一个元素上触发时，它会按照事件冒泡或捕获的机制向上或向下传递到其父元素或子元素，...
`jQuery` 提供了一种更加灵活的方式来创建自定义的弹出层提示框，使得开发者能够根据需要设置提示框的样式、内容以及交互方式，从而提升用户体验。本教程将围绕“`jQuery` 弹出层提示框，告别`alert`丑陋框”这一...
"复选框的全选和取消的例子"是一个实际应用案例，展示了如何实现对一组复选框进行全选和取消全选的功能，同时涉及到了数据的存储与管理，如使用SQL Server 2000数据库进行数据操作。 在这样的系统中，通常会有一个...