jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(){
alert("Hello,huanying2015!");
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果：
在这里：
弹出3，弹出2，弹出1 这三个事件是冒泡事件；
页面跳转到 www.baidu.com 为默认事件
分别可以使用不同的方法来阻止这两种事件的发生
1.阻止冒泡事件，使用 stopPropagation() 函数来执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function( event ){
alert("Hello,huanying2015!");
event.stopPropagation();
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果：不会产生冒泡事件
2.阻止默认事件：
使用 preventDefault() 来执行；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(event){
alert("Hello,huanying2015!");
event.preventDefault();
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果：只会产生冒泡事件，不会执行默认跳转
3. 如果既要阻止冒泡事件，又要阻止默认事件，改怎么做呢？
3.1 把阻止默认事件和冒泡事件合并起来，即如下：
3.2 使用 return false 来阻止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(){
alert("Hello,huanying2015!");
return false;
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果：不会产生冒泡事件，也不会产生默认事件
jquery 阻止冒泡事件和阻止默认事件的更多相关文章
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
- jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...
- jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...
- [oldboy-django][1初识django]阻止默认事件发生 + ajax + 模态编辑对话框
阻止默认事件发生 a 阻止a标签默认事件发生方法 <a href="http://www.baidu.com" onclick="modalEdit();" ...
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
随机推荐
- actor model vs tasked based parallizm
举例子:计算pi actor model概念:一般有n个actor(task),和一个调度线程(本身也是一个actor)调度线程负责向每个task发送命令执行计算,以及接收每个task的结果并归并到一 ...
- RAC8——scan ip的理解
SCAN概念 先介绍一下什么叫SCAN,SCAN(Single Client Access Name)是Oracle从11g R2开始推出的,客户端可以通过SCAN特性负载均衡地连接到RAC数据库.S ...
- 从操作系统rm数据文件后，利用句柄与rman恢复的过程。（已验证）
以下操作代码的流程是配的,但是相应的文件名,啥的 必须改动. 故障现象 数据文件被误删除 具体情况 接到反馈说,数据文件data20120512.dbf被误删除,需要恢复 数据库提示 ERROR ...
- js object对象赋值bug和对象复制clone方法
最近在写程序的时候发现,如果新建一个object对象objb,初始化值为obja,如果改变了objb对象的字段值,那么obja也会随之改变,看来对象赋值传递的是一个引用. 代码重现: <scri ...
- MapReduce – 基本思路之推荐引擎
理解MapReduce关键两个步骤: 首先是构想出结构的数据结构,这种数据结构可以支撑你的业务分析使用:是要理解这种模式的处理元素. 第二步,分析原始数据的结构是怎样的: 第三步,基于原始数据结构以及 ...
- opencv中的洪水填充算法
在图像处理里,如果我们需要填充一个区域,使该区域为相同的颜色,则比较常用的是洪水填充法.洪水填充法可以用DFS也可以用BFS实现. opencv下有函数实现该功能: CVAPI(void) cvFlo ...
- ComboBox智能搜索功能
cmbList.AutoCompleteSource = AutoCompleteSource.ListItems; cmbList.AutoCompleteMode = AutoCompleteMo ...
- 豆瓣源安装python包
例如安装scrapy: pip install -i https://pypi.douban.com/simple/ scrapy
- C#使用WebService 常见问题处理
C#使用WebService 一.新建webservice 新建项目→asp.net Web服务应用程序 或者在现有项目中 点击右键 新建web服务程序asmx 只要在webservice类里面 ...
- JpGraph使用详解http://5ydycm.blog.51cto.com/115934/177498 http://www.cnblogs.com/txw1958/archive/2013/08/18/php-charts.html
下载 在官方网站 http://www.aditus.nu/jpgraph/ 下载jpgraph,其中1.X系列是用于PHP4的,2.X系列是用于PHP5的. 安装 将下载的得到的jpgraph压缩文 ...