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都有可能出现,它的默 ...
随机推荐
- [C#]画图全攻略（饼图与柱状图）(转)
http://blog.chinaunix.net/uid-15481846-id-2769484.html 首先建立一个c#的类库. 打开vs.net,建立一个名为Insight_cs.WebC ...
- ASP.NET网站权限设计实现（二）——角色权限绑定
1.关于使用的几张表的说明 (1)Module:模块表,记录模块名称.编码等模块基本数据. (2)Permissions:权限表,记录所有模块权限distinct之后的数据. (3)Modu ...
- Sql Server Report Service 的部署问题
近期在研究SSRS部署问题,因为以前也用到过SSRS报表,但当时开发的报表是有专门的集成系统的,不需要我自己去部署,所以对这一块的部署也不熟悉,我记得当时我是直接开发出一个SSRS 报表,然后会通过自 ...
- linux下syscall函数 间接系统调用
NAME syscall - 间接系统调用 SYNOPSIS #define _GNU_SOURCE #include ...
- Python基础学习笔记，进阶学习笔记 出处
参考 虫师-博客 http://www.cnblogs.com/fnng/category 随笔分类相关文章
- Java 浅析 Thread.join()
概要 本文分为三部分对 Thread.join() 进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() ...
- ASP.NET Web Pages：PHP
ylbtech-.Net-ASP.NET Web Pages:PHP 1.返回顶部 1. ASP.NET Web Pages - PHP PHP 开发人员请注意,Web Pages 可以用 PHP 编 ...
- 在Linux 系统 Latex安装 使用入门教程
来源: http://blog.chinaunix.net/u/25605/showart_2100398.html 入门介绍好文:TeX.LaTeX.TeXLive 小结 笔记详情:http://v ...
- [UE4]创建对象的的几种姿势（C++）
DEMO源代码 这个DEMO演示了在C++代码中,创建UE4的常见类型的对象,包括Actor,ActorComponent,加载资源等. 源代码请从这里下载:https://code.csdn.net ...
- git clone的时候filename too long解决办法
在git bash中,运行下列命令: git config --global core.longpaths true