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都有可能出现,它的默 ...
随机推荐
- spring 核心思想：AOP 理解
什么是AOP? AOP概念介绍 所谓AOP,即Aspect orientied program,就是面向方面(切面)的编程. 面向切面编程Aspect-Orlented-Programming,即AO ...
- bzoj2467生成树
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2467 大水题. #include<iostream> #include<cs ...
- Joyoi公路乘车（原tyvj1015）
题目:http://www.joyoi.cn/problem/tyvj-1015 水题.连优化都不用. #include<iostream> #include<cstdio> ...
- Vue 网络请求
Vue网络请求,用的是vue-resource 1. 首先需要安装vue-resource npm install vue-resource 2. 安装好之后,会在package.json文件中自动加 ...
- hadoop最新版本介绍之dkhadoop版本选择
Hadoop对于从事互联网工作的朋友来说已经非常熟悉了,相信在我们身边有很多人正在转行从事hadoop开发的工作,理所当然也会有很多hadoop入门新手.Hadoop开发太过底层,技术难度远比我们想象 ...
- hadoop项目开发案例方案汇总
大数据Hadoop应用开发技术正可谓如火如荼推进中,以为大数据已经不仅仅是局限在互联网领域,而是已经被上升到了国家战略的高度层面.大数据正在深刻影响和改变我们的日常生活和工作方式. Hadoop应用开 ...
- iText使用经历
最近用iText搞了下PDF,虽然一路趟坑而过,毕竟是搞出来了,所以iText还是不错的开源PDF生成软件的.先看搞出来的PDF长啥样: 然后看一路趟过来的坑: 1.表格怎么生成,具体是行怎么生成?列 ...
- ES(6): access elasticsearch via curl
curl是一个非常实用的.用来与服务器之间传输数据的工具:支持的协议包括 (DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, ...
- linux sh文件提示 no such file or directory
Linux执行.sh文件,提示No such file or directory的问题的解决方法 12-06-28 16:59作者:love__coder Linux执行.sh文件,提示No such ...
- 开启postgresql的远程权限
cd /etc/postxxxx/版本号/main vim postgresql.conf 修改 #listen_addresses ='localhost'为 listen_addresses =' ...