JavaScript捕捉事件和阻止冒泡事件实例分析

本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考，具体如下：

今日，项目程序出现异常，后发现跟冒泡事件有关，利用此机会探索一下利用Javascript捕获和冒泡事件。

一、要探究捕获和冒泡事件，首先要知道什么是事件的捕获和冒泡，所以呢，先从概念入手；

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

其实事件冒泡是一个从后代节点向祖先节点冒泡的过程，而捕获是从祖先节点到后节点的过程。

我为了方便理解，则用先捕获，后冒泡，捕获从上到下，冒泡从下到上来记忆。我记得从哪儿看到的，有人把捕获比喻为石头沉入海底，而把冒泡比喻为气泡冒出水面。当然了，捕获的深度取决于你的DOM布局，海底就有点深了哈，^_^

注意：IE6、IE7、IE8只支持冒泡流，不支持捕获流。

二、为什么要阻止冒泡事件

也许会有人问：为什么要阻止冒泡事件呢？阻止冒泡事件有什么用处呢？

下面我们就来说下为什么要阻止冒泡事件：

先举个例子吧，如下代码：

<html>
  <div id='div_1' onclick="alert('I'm First!')">
     <div id='div_2' onclick="alert('I'm Second!')">
         <a id="alink" onclick="alert('I'm Third!')" href="http://www.baidu.com" rel="external nofollow" >Click Here</a>
     </div>
  </div>
</html>

从上面的代码可以看出，div_1是div_2的容器，而div_2是a的容器，总共三层。

我们运行这个实例，点击Click Here会发现，分别弹出了三个alert提示框，而且顺序为I'm Third! 、I'm Second!、I'm First!，这就符合我们上面提到的冒泡的概念了。

而我这次碰到的问题就是这样，我称之为“事件重叠”。

出现这种情况，肯定不行，所以我们要阻止该事件冒泡的发生，那如何来阻止呢？下面将。

三、阻止事件冒泡的方法

首先我先给出一个纯JavaScript版的写法：

function aOnClick(e){
   window.event? window.event.cancelBubble = true : e.stopPropagation();
}

解释：因为IE里的阻止冒泡的写法为window.event.cancelBubble = true，其他浏览器为e.stopPropagation();所以这里做了兼容。

再给出一个jQuery版本的写法：

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

四、阻止冒泡的其他方法及不同

我就是用上面的函数阻止了冒泡，但是还有其他的方法可以达到类似的效果，但还是有所不同；

$("#alink").click(function(event) {
  return false;
});

解释：上面方法使用jQuery对alink进行了操作，经过测试，得出结论，该函数阻止了冒泡，但是它将a的默认行为也屏蔽掉了(此处为href属性)。这就是不同之处。

顺便说下，javasccript的阻止默认行为的方法

event.preventDefault();

从上面可以看出，return false;是event.stopPropagation();和PreventDefault()的并集。

就到这里吧！

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 浅谈javascript事件取消和阻止冒泡

    取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程序,它使用全部的三种取消技术: function cancelHandler(event){ var even

  • JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“

    说下闭包的由来 function a() { var i = 0; function b() { console.log(i); } return b; } var c = a(); c(); 一般来说,当一个函数内部匿名函数用到了自己的变量,并且这个匿名函数被返回了,这就建立了一个闭包,比如上面的代码 这个时候,就算a调用结束被销毁,i也会存在不会消失当a定义时,js解释器会将函数a的作用域链设置为定义a时所在环境当执行a时,a会进入相应的执行环境,执行环境创建后才会有作用域scope属性,然

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • zepto.js中tap事件阻止冒泡的实现方法

    本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

  • JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. 第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>b

  • js阻止冒泡和默认事件（默认行为）详解

    本文实例为大家分享了js阻止冒泡和默认事件方法,供大家参考,具体内容如下 阻止冒泡.冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了.下面的domo就是很好的例子. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • js利用事件的阻止冒泡实现点击空白模态框的隐藏

    很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框.假设如下场景,一个小按钮,点击可以弹出一个模态框. 就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model 也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下: 按钮点击弹出事件监听: 复制代码 代码如下: $("#btn").bind("click",function(e){ if(

  • js冒泡、捕获事件及阻止冒泡方法详细总结

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结. 事件冒泡是一个从子节点向祖先节点冒泡的过程: 事件捕获刚好相反,是从祖先节点到子节点的过程. 给一个jquery点击事件的例子: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>test</title> <head> <scrip

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

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

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 复制代码 代码如下: function stopBubble(e){  if(e&&e.stopPropagation){//非IE   e.stopPropagation();  }  else{//IE   window.event.cancelB

随机推荐