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都有可能出现,它的默 ...
随机推荐
- nyoj 单调递增最长子序列
单调递增最长子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4 输入 ...
- [CLPR] 卷积还是相关? - Opencv之filter2D探究
I am doing something about convolving images in Python and for sake of speed I chose opencv 2.4.9. O ...
- BaseDao的编写：实现 增，删，改，查，分页这些公共方法的编写
1.BaseDao接口 package com.learning.crm.base; import java.io.Serializable; import java.util.List; publi ...
- Django 配置总结
配置 app urls 项目下的urls.py from django.conf.urls import url,include urlpatterns = [ url(r'^BookApp/', i ...
- android 自定义radiogroup的两种方式
这里先备注下 listview+radiobutton实现 浅显易懂 http://www.haolizi.net/example/view_3312.html 在radiogoup原生态源码的基础 ...
- VS编译时使用/去除NuGet管理库
原文链接:VS编译时自动下载NuGet管理的库 之前一直使用NuGet来管理一些第三方的库,但是每次check in代码时候为了保证编译通过,都需要把对应的packages check in. 比较耗 ...
- Eclipse: the import java.util cannot be resolved
the import java.util cannot be resolved 导入JRE System Library. 右键项目 Build Path Configure Build Path.. ...
- freemarker 宏嵌套nested 的使用
转载来源:http://blog.sina.com.cn/s/blog_7e5699790100z59g.html 模板页: <#assign basePath = request.contex ...
- man page ，info page 和/usr/share/doc/整理自鸟哥
- 比如查看date指令 - 命令:vbird@www ~]$ man date - 返回示例(部分):DATE(1) User Commands DATE(1) - 部分释义(注释2): ...
- [UE4]事件处理(Handling Events)和委托（Delegate）代码示例（一）
1. 通过重写虚函数来处理事件 MyTriggerVolume.h 自定义一个Actor类,添加一个 Box 组件作为触发区域,然后通过重写虚函数——NotifyActorBeginOverlap, ...