在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window) -摘自网络

这里使用简单的一个demo来演示一下js中的冒泡事件

效果图

布局

<div class="first_div">
最外层div
<div class="second_div">
中间层
<div class="third_div">
最里层
</div>
</div>
</div>
<div class="msg_div"></div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

也就是三个DIV分别为不同的背景色

CSS

    <style type="text/css">

        div {

            border: solid 1px deepskyblue;
padding: 2em;
width: 30%
} div .third_div { background-color: red;
} div .second_div { background-color: deepskyblue;
} .first_div { height: auto;
background-color: lawngreen;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

jquery添加事件并且在点击后有对应文本输出显示

<!--javascript代码-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript"> // alert(parseInt(Math.floor(Math.random() * 10)));
$(function () {
$('.third_div').bind('click', function (event) { func("你点击最里层DIV")
// event.stopPropagation();
// return false;
}); $('.second_div').bind('click', function (event) { func("你点击了中间层DIV")
// event.stopPropagation();
// return false;
});
$('.first_div').bind('click', function (event) { func("你点击了最外层DIV")
// event.stopPropagation();
// return false;
});
$('body').bind('click', function () { func("你点击了body");
// event.stopPropagation();
// return false;
})
}) var colorArray = new Array("blue", "grey", "green", "red", "orangered", "darkviolet", "orange", "crimson", "chartreuse", "black"); var count = 0;
var func = function (str) {
count++;
var child = $("<div></div>");
child.css({
"color": colorArray[parseInt(Math.floor(Math.random() * 10))],
"border": "solid 1px grey",
"padding": "0.5em"
});
child.text(count + ":" + str);
$('.msg_div').append(child);
if (count % 3 === 0) {
count = 0;
$('.msg_div div:last-child').after("<hr>");
}
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

在最里层添加了阻止代码后效果

我们可以很明显的看到在使用了阻止的对应方法后,事件没有继续往上层走,被拦截在了当前这一层。

总结

阻止事件冒泡的几种方法


第一种: event.stopPropagation(); 
第二种: return false; 
第三种: event.preventDefault(); 

JS的冒泡事件的更多相关文章

  1. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  2. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js阻止冒泡事件及默认操作

    1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对 ...

  4. js阻止冒泡事件和默认事件的方法

    阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...

  5. js 阻止冒泡事件和默认事件

    阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...

  6. JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...

  7. js实现冒泡事件,点击ul给子标签添加相同事件和阻止冒泡事件

    $('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){            var e=e||windo ...

  8. JS阻止冒泡事件

    <!DOCTYPE html><html><head> <title></title> <style type="text/ ...

  9. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

随机推荐

  1. 二、Nginx配置实例

    Nginx配置实例 一.反向代理 实例一 1.实现效果 打开浏览器,在浏览器地址栏输入地址 www.123.com ,跳转到linux系统tomcat主页面中. 2.准备工作 在linux系统中安装t ...

  2. vue 父子通信

    节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法.更推荐用 props 和 events 实现父子组件通信

  3. Spring-Security无法正常捕捉到UsernameNotFoundException异常

    前言 在Web应用开发中,安全一直是非常重要的一个方面.在庞大的spring生态圈中,权限校验框架也是非常完善的.其中,spring security是非常好用的.今天记录一下在开发中遇到的一个spr ...

  4. navicate premium连接sqlserver时报08001错误的解决方法

    ---恢复内容开始--- navicate premium连接sqlserver时报08001错误的解决方法 1.自己一直使用navicate连接sqlserver,但是自从自己的电脑安装了sqlse ...

  5. [USACO19OPEN]Valleys P

    题意 洛谷 做法 用并查集维护区域,剩下的就只用判是否有洞就好了 然后手玩出一个结论:凸角为\(+1\),凹角为\(-1\),和为\(sum\),洞数\(h\),满足\(sum=4-4h\) 位置\( ...

  6. PP: Unsupervised deep embedding for clustering analysis

    Problem: unsupervised clustering represent data in feature space; learn a non-linear mapping from da ...

  7. LVS负载均衡工作模式和调度算法

    原文链接:https://blog.csdn.net/weixin_40470303/article/details/80541639 一.LVS简介 LVS(Linux Virtual Server ...

  8. C# WPF Bing地图展示

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议,请网站留言: 如果您觉得Dotnet9对您有帮助,欢迎赞赏 内容目录 实现效果 业务场景 编码实现 本文参考 源码下载 1.实现效果 Bi ...

  9. Java设计模式(一)UML总结

    定义 统一建模语言(英语: Unified Modeling Language ,缩写UML)是非专利的第三代建模和规约语言. UML特点 UML是一种开放的方法 用于说明.可视化.构建和编写一个正在 ...

  10. [PAT] A1019 General Palindromic Number

    [题目] https://pintia.cn/problem-sets/994805342720868352/problems/994805487143337984 题目大意:给定一个N和b,求N在b ...