<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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);
});
})
</script>
</head>
<body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>
<div id="msg"></div>
</body>
</html>
效果图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停止事件冒泡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
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>
效果图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止默认行为</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</script>
</head>
<body>
<form action="test.html">
用户名：
<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>
效果图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止默认行为 - false</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
return false;
}
})
})
</script>
</head>
<body>
<form action="test.html">
用户名：
<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>
效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停止事件冒泡 - false</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为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>
效果图：
相关推荐
《JQuery实现冒泡提示的技巧与应用》 在网页开发中，为了提供更好的用户体验，开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求，它允许我们轻松地创建出具有冒泡效果的...
在JavaScript和jQuery中，事件处理有两个关键概念：事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始，然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性，将事件处理器绑定到一个父元素上，以此来...
JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....
在Web开发中，事件冒泡是JavaScript中一个重要的机制，当一个元素上发生了事件，比如点击、鼠标经过等，这个事件不仅会在该元素上触发，还会向上传播到更高级的元素，如父元素、祖父元素等。这样的设计便于我们对一...
**JQ 事件绑定** 在前端开发中，jQuery（简称JQ）库是广泛使用的工具，它极大地简化了JavaScript操作，特别是在DOM元素的选择、操作和事件处理方面。本篇文章将深入探讨JQ中的事件绑定机制。 事件绑定是网页交互的...
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
首先，事件冒泡是指在DOM树中，一个事件不仅仅会在它发生的元素上触发，还会沿着DOM树向上传播到祖先节点。这种机制允许开发者为多个元素绑定相同的事件处理器，但也可能导致一些不期望的行为，比如一个在子元素上的...
冒泡排序是一种基础的排序算法，它通过重复遍历待排序的序列，比较相邻元素并交换位置，使得每个元素都能找到其正确的位置。在本教程中，我们将深入探讨如何使用C#后端和jQuery前端来实现这个算法，这对于初学者来说...
事件冒泡和默认行为是理解JavaScript事件模型的关键概念。本文将详细探讨这两个概念以及如何在jQuery中控制它们。 **事件的冒泡** 事件冒泡是指当一个事件（如点击）在DOM（文档对象模型）中的某个元素上触发时，该...
什么是JS事件冒泡？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
- **事件冒泡与阻止**：了解事件冒泡机制，以及如何使用`.stopPropagation()`阻止事件向上冒泡。 - **委托事件**：对于动态添加的元素，可以使用事件委托，如`.on('focus', '.childClass', function() {...})`，让父...
事件冒泡可以让子iframe中的事件传递到父页面，通过监听和处理这些事件，我们可以实现跨iframe的拖拽同步。 在实现过程中，可能需要用到以下技术： 1. `window.postMessage`：用于父子iframe之间的安全通信，传递...
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
综上所述，"jq评分"涉及了jQuery库中的DOM操作、事件处理、状态管理、鼠标跟随效果、动画、事件冒泡控制、Ajax交互等多个重要概念。通过熟练掌握这些技术，我们可以创建出一个功能完整且用户体验良好的评分系统。在...
描述： 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。 version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过...
**JQ 合成事件详解** 在Web开发中，jQuery（简称JQ）是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。其中，"JQ 合成事件"是jQuery提供的一种优化事件处理的方式，用于...
return false 在事件的处理中，可以阻止默认事件和冒泡事件。 B：event.preventDefault()—> In event handler ,prevent default event (allows bubbling) 。 event.preventDefault()在事件的处理
本文主要探讨了jQuery中的两个关键概念：事件冒泡和阻止默认行为。 首先，我们来看事件冒泡。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...