什么是冒泡？
点击一个click事件的时候当前的click事件执行完成之后外面的click事件也会执行这种就是冒泡事件。
怎么阻止冒泡？
阻止冒泡事件也是阻止默认行为。可以用event.preventDefault()这个函数;
不想阻止，就想停掉;
可以用event.stopPropagation()或者return false;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的顺丰</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<style>
#content{border: 1px solid red;}
#msg{border:1px solid #0000FF;margin: 2rem ;}
</style>
</head>
<body class="wrapper">
<div id="content">
外层div元素
<span>内层span元素</span>
</div>
<div id="msg"></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//为span元素绑定click事件
$('span').bind('click', function (event) {
var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
$('#msg').html(txt);
alert(1);
return false;
});
//为span元素绑定click事件
$('#content').bind('click', function (event) {
var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
$('#msg').html(txt);
alert(2);
});
//为span元素绑定click事件
$('body').bind('click', function (event) {
var txt = $('#msg').html() + '<p>body元素被点击</p>';
$('#msg').html(txt);
alert(3);
});
});
</script>
</html>
分享到：
相关推荐
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
直接运行html 文件即可,第一个文本框为要排序的数字,第二位为排序后的现实的地方
JavaScript中事件冒泡机制示例详析 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，...
一种解决事件冒泡的方法，有较好的浏览器兼容性，具体思路参见文档： http://blog.csdn.net/ivyandrich/article/details/22041933
JavaScript事件冒泡示例，简单，明了，实用。
事件冒泡、事件捕获和事件委托 在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下事件冒泡和事件捕获： 事件冒泡会从当前触发的事件目标一级一级往上传递，...
然而，在今天一些大型的WEB交互项目中，比如大型的WebGame项目，JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。 如果你对JavaScript事件冒泡还没有什么印象...
本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考，具体如下： 今日，项目程序出现异常，后发现跟冒泡事件有关，利用此机会探索一下利用Javascript捕获和冒泡事件。 一、要探究捕获和冒泡事件...
事件是javascript中的核心内容之一，在对事件的应用中不可避免的要涉及到一个重要的概念，那就是事件冒泡，在介绍事件冒泡之前，先介绍一下另一个重要的概念事件流： 一.什么是事件流: 文档对象模型（DOM）是一个树...
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
增删改案列升级（冒泡事件）。 香蕉 删除</span><span class="undate">修改</span></div> 香蕉 删除</span><span class="undate">修改</span></div> 香蕉 删除</span><span class="undate">修改</span></div> ...
冒泡排序
主要介绍了Javascript冒泡排序算法的相关资料,需要的朋友可以参考下
冒泡排序执行过程分析数列： 4, 1, 3, 5, 2 1, 3, 4, 2, 51,4,3,5,2 => 1,3,4,5,2 => 1,3,4,5,2 =>
主要介绍了Javascript 事件冒泡机制详细介绍的相关资料,需要的朋友可以参考下