JQuery事件冒泡机制与解决

最新推荐文章于 2024-08-17 15:56:45 发布

Inuyasha1121

最新推荐文章于 2024-08-17 15:56:45 发布

阅读量2.5k

点赞数 2

分类专栏： jquery 事件事件冒泡文章标签：阻止事件冒泡

jquery 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

事件

3 篇文章 0 订阅

订阅专栏

事件冒泡

1 篇文章 0 订阅

订阅专栏

一、什么是事件冒泡？

       当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。
当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

      当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。
      为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。

在事件捕获的过程中：事件首先会交给最外层的元素，接着再交给更具体的元素。

在事件冒泡中：当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡至更一般的元素。事件冒泡有时候会产生副作用，导致始料不及的行为。

那么，什么浏览器采用的是“事件捕获”模式，而又有哪些采用的是“事件冒泡”模式呢？

其实，最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般到具体进行捕获，钴，事件再通过冒泡返回DOM树的顶层。而事件处理可以注册到这个过程中的任何一部分。即，可以把事件处理程序注册到事件捕获阶段，也可以注册到事件冒泡阶段。

jQuery为了提供跨浏览器的一致性，它始终会在冒泡阶段注册事件处理程序。因此，我们总可以假定最具体的元素会首先获得响应事件的机会。

二、阻止事件冒泡

<html>
<head>
<title>Porschev---Jquery事件冒泡</title>
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<div id="divOne" οnclick="alert('我是最外层');">
  <div id="divTwo" οnclick="alert('我是中间层！')">
    <a id="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"οnclick="alert('我是最里层！')">点击我</a>
  </div>
</div>
</body>
</html>

上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;
他们都有各自的click事件，最里层a标签还有href属性的默认行为。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

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

以下有四种阻止冒泡方法：

1.event.stopPropagation();

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

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

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

2.return false;

<pre name="code" class="html"><scripttype="text/javascript">
$(function(){
  $("#hr_three").click(function(event){
    return false;
  });
});
<script>

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

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

3.event.preventDefault();

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

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

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

4.event.tatget==this

<scripttype="text/javascript">
$(function(){
<pre name="code" class="html">  $("#divOne").click(function(event){
    if(event.tatget==this){
      //执行
    }
  });

  $("#divTwo").click(function(event){
    if(event.tatget==this){
      //执行
    }
  });

$("#hr_three").click(function(event){ if(event.tatget==this){
//执行
} });});<script>

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

作用是：事件处理过程中，阻止了事件冒泡，但不会阻击默认行为，event.target属性保存着发生事件的目标元素，只有在真正的目标元素触发事件时才执行操作。

注：一个事件起泡对应触发的是上层的同一事件
　　特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件（双击包含单击）。