什么是冒泡？
点击一个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>
分享到：
相关推荐
而在IE8中，事件处理顺序会是`div -> body -> document`，因为IE不会将冒泡事件传播到`window`级别。 这段描述中还提到了事件处理函数的两种模型：捕获型事件和冒泡型事件。Firefox支持这两种模型，但默认情况下，...
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
直接运行html 文件即可,第一个文本框为要排序的数字,第二位为排序后的现实的地方
JavaScript中的事件处理是Web开发中的核心概念，主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**：事件冒泡是事件处理的默认模式，...
冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型，它们定义了事件在DOM树中传播的顺序。在实际的Web开发中，深入理解这两种模型对于正确处理事件，避免潜在的问题至关重要。 冒泡事件是指当一个事件在...
JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一，它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始，沿着树向下...
要实现这个功能，我们需要理解JavaScript事件冒泡的概念。在DOM中，事件会从最深的节点开始向上层节点传播，直到到达文档的根节点，这个过程就称为事件冒泡。阻止事件冒泡可以避免一个事件被多次处理，提高性能，...
本文将深入探讨JavaScript事件机制，特别是事件的捕获和冒泡阶段。 首先，理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作，比如点击按钮、页面加载或滚动等。当这些事件发生时...
在JavaScript的DOM编程中，事件冒泡是一个非常重要的概念，尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...
JavaScript中的事件是网页交互的核心，事件流和事件冒泡是理解事件处理机制的关键。事件流描述的是事件在DOM树中传播的顺序，分为两种模式：事件冒泡和事件捕获。 1. **事件流** - 事件流分为两种类型：事件冒泡和...
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
JavaScript中的冒泡排序是一种基础且常见的排序算法，它的工作原理是通过不断交换相邻的不正确顺序的元素，使得较大的元素逐渐“冒”到数列的末尾，从而达到排序的目的。冒泡排序的时间复杂度在最坏的情况下为O(n^2)...
在javascript的dom操作做肯定会遇到js的冒泡事件，最常见的是div弹窗事件如图解 当点击灰色部分是弹窗消失，点击黑色部分时没有效果。 通过下面一段代码来分析js的冒泡事件 html代码： 代码如下: <!DOCTYPE ...
jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。它的语法简洁，使得开发者能够更高效地编写JavaScript代码。 hover事件是jQuery中的一个特殊事件，用于处理元素的鼠标...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...