Js冒泡事件

最新推荐文章于 2022-03-27 10:33:11 发布
最新推荐文章于 2022-03-27 10:33:11 发布
阅读量254 收藏
点赞数
分类专栏： JavaScript

什么是JS事件冒泡？：

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

如何来阻止Jquery事件冒泡？

 

通过一个小例子来解释

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"%>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title>Porschev---Jquery 事件冒泡</title>
 
 <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
 
 </head>
 <body>
 <form id="form1" runat="server">
 <div id="divOne" onclick="alert('我是最外层');">
 <div id="divTwo" onclick="alert('我是中间层！')">
 <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>
 </div>
 </div>
 </form>
 </body>
 </html> 

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

 

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层

---->然后再链接到百度.

 

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

 

如何来阻止?

 

1.event.stopPropagation(); 

 <script type="text/javascript">

        $(function() {
            $("#hr_three").click(function(event) {
                event.stopPropagation();

 /*去除js冒泡事件
   if (Sys.ie) browsersType="IE";
      if (Sys.firefox) browsersType="Firefox";
    if(browsersType=="IE"){
     window.event.cancelBubble = true;
    }else{
          event.stopPropagation();
    }

            });
        });


       

 

再点击“点击我”，会弹出：我是最里层，然后链接到百度

 

 

 2.return false;

如果头部加入的是以下代码

 <script type="text/javascript">
 
$(function() {
$("#hr_three").click(function(event) {
 return false;
});
});
 
<script>

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

 

由此可以看出：

1.event.stopPropagation(); 

   事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

 

 

2.return false;

   事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

 

 

还有一种有冒泡有关的：

3.event.preventDefault(); 

   如果把它放在头部A标签的click事件中，点击“点击我”。

   会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

 

    它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

zhu473105308
关注
专栏目录
js事件冒泡机制
qq_21747731的专栏
04-14 352
发生条件 事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 取消事件冒泡 <s...
JS冒泡事件与事件捕获实例详解
11-26
本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下： 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> [removed] [removed] = function(){ ...
Jquery 事件冒泡
weixin_34023863的博客
11-04 166
  什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 （摘自网络） ...
JS的事件冒泡和事件捕获
weixin_34387468的博客
03-05 222
先上结论：他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发...
jQuery 事件冒泡
shuai的博客
04-13 342
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href...
JavaScript事件传播(冒泡机制)
weixin_30753873的博客
08-12 160
今天在使用javascript弹出菜单时遇到了问题,搞了一晌终于算有点眉目了.和大家一起分享下.有什么不对的地方希望大家多多留言评论. 定义:JavaSciprt事件中有两个很重要的特性：事件冒泡 以及目标元素 。 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒...
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
js 冒泡事件
08-12
本文将深入探讨“JS冒泡事件”，并结合相关工具和源码进行详细解析。 ### 1. 事件冒泡 事件冒泡是指当一个事件在一个元素上发生时，该事件会从这个元素逐级向上层父元素传播，直到到达文档的根节点。这一过程就像...
Js冒泡事件详解及阻止示例
10-26
JavaScript中的事件冒泡是DOM（文档对象模型）事件处理的核心机制之一，它描述的是事件从最深的节点开始，逐级向上层节点传播的过程。在上述示例中，当一个元素（例如`inner`）被点击，触发了其定义的事件（如`click...
JS冒泡事件的快速解决方法
10-26
JavaScript中的冒泡事件是事件处理中的一个关键概念，它源于事件在DOM（文档对象模型）层级中的传播方式。当一个事件（如鼠标点击）在某个元素上触发时，该事件不仅会在该元素上执行，还会逐级向上层元素传播，直到...
什么是JS事件冒泡？
lxf0613050210的博客
01-31 298
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次 的最顶层，即document对象（有些浏览器是window）。   如何来阻止Jq
js事件冒泡
兔子学前端
11-23 155
冒泡 *{margin: 0;padding:0;} .div1{width: 400px;height: 200px;background: red;position: absolute;top: 100px;left: -400px;} .div2{width: 200px;height: 100px;background: blue;top: 50px;left: 400px
js中事件冒泡
im_dogg的博客
11-16 598
我们先来说一下什么是事件冒泡 事件冒泡：当一个元素接收到事件后，会沿着DOM结构将事件逐层传递到其父元素上  在页面中写三个嵌套的div，dom结构如下 &lt;/head&gt; &lt;body&gt; &lt;div id="one"&gt; &lt;div id="two"&gt; &lt;div id="three"&gt
JS中的事件冒泡
qq_41557320的博客
10-09 2949
js中的事件冒泡指的是：多个元素嵌套的时候，它们就会有层次关系，当这些元素注册了相同的事件时，如果其中一层的元素触发了这个事件，可能导致其它层的元素也触发这个事件，这样一来就会造成混乱。这个情况就是事件冒泡。为了避免这种混乱的发生，我们要想办法阻止事件冒泡的发生。 看一个事件冒泡的例子： 上面是三个相互嵌套的div，样式代码这里省略了，js代码中，分别为这三个div注册了onclick点击事件...
JavaScript的事件冒泡是什么
qq_19396231的博客
08-04 187
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把...
Javascript的事件冒泡
热门推荐
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
js事件的冒泡
weixin_45561258的博客
04-08 2617
1.事件的冒泡（Bubble） 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bigb
JS的冒泡事件
哈喽沃德
11-22 2420
JS的冒泡事件什么是冒泡事件？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window） -摘自网络 这里
js冒泡事件和捕获事件
最新发布
08-11
JavaScript中的事件模型包括冒泡事件和捕获事件。这两个事件是指在页面中嵌套的元素中触发事件时，事件传播的方式。 冒泡事件是指当一个特定元素上的事件被触发时，该事件会先被触发在最内层的元素上，然后逐级向外传播，直到触发在最外层的元素上。换句话说，事件会从最具体的元素开始向最不具体的元素传播。 捕获事件是指当一个特定元素上的事件被触发时，该事件会先被触发在最外层的元素上，然后逐级向内传播，直到触发在最内层的元素上。与冒泡事件不同，捕获事件从最不具体的元素开始向最具体的元素传播。 在JavaScript中，可以使用addEventListener方法来注册事件监听器，并指定事件是否在捕获或冒泡阶段进行处理。例如： ```javascript element.addEventListener('click', myFunction, true); // 在捕获阶段处理 element.addEventListener('click', myFunction, false); // 在冒泡阶段处理（默认） ``` 需要注意的是，默认情况下，addEventListener方法注册的事件监听器是在冒泡阶段进行处理。如果想要在捕获阶段进行处理，需要将第三个参数设置为true。 希望以上解答能够帮助到你！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值