`

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();
            });
        });
       

<script>

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

 

 

 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事件中,点击“点击我”。

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

 

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

分享到:
评论
3 楼 gandilong 2013-07-22  
无聊!
2 楼 miaoqingjun07 2013-06-20  
懂了
1 楼 好好学习行不 2013-06-11  
 

相关推荐

    JavaScript事件冒泡示例.html

    JavaScript事件冒泡是Web开发中的一个关键概念,它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式,当一个事件(如点击、鼠标移动等)在一个元素上触发时,该事件会自底向上沿着DOM树...

    JavaScript事件冒泡与取消事件冒泡代码演示

    本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。代码中,页面包含一个div元素和一个嵌套在其中的span元素,分别设置了单击响应函数。当单击span...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    JavaScript中的事件处理是Web开发中的核心概念,主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**:事件冒泡是事件处理的默认模式,...

    阻止滚动条事件冒泡

    要实现这个功能,我们需要理解JavaScript事件冒泡的概念。在DOM中,事件会从最深的节点开始向上层节点传播,直到到达文档的根节点,这个过程就称为事件冒泡。阻止事件冒泡可以避免一个事件被多次处理,提高性能,...

    javascript事件冒泡简单示例

    在下面的示例中,我们将详细探讨JavaScript中的事件冒泡、其原因以及如何阻止它。 事件冒泡是指事件从最深的DOM元素(即事件触发的元素)开始,然后逐级向上层元素传播事件。在这个过程中,每个节点都会接收到相同...

    Javascript 事件冒泡机制详细介绍

    Javascript中的事件冒泡机制是其事件处理模型的重要组成部分,它描述了当一个事件在DOM元素上发生时,这个事件不仅仅会在该元素上触发,还会向上逐级在父级元素中传播,直至到达DOM树的根部。这种机制允许开发者在...

    JavaScript 事件冒泡简介及应用

    JavaScript 事件冒泡是Web开发中的一个重要概念,它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素,直到到达文档的根节点(通常是document...

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation) 在JavaScript事件处理机制中,事件冒泡传递是一个重要的概念。当一个元素触发某个事件时,该事件就会沿着DOM树向上传递,直到到达文档的根元素为止...

    JavaScript 事件冒泡应用实例分析

    JavaScript事件冒泡是DOM(文档对象模型)中事件处理的核心机制之一,它描述了事件从最深的DOM节点开始触发,然后逐级向上层节点传播的过程。在大型的Web交互项目,尤其是WebGame中,对事件冒泡的精确控制至关重要,...

    JavaScript事件冒泡机制原理实例解析

    JavaScript事件冒泡机制是Web开发中的一个重要概念,它描述了事件在DOM(文档对象模型)树中传播的顺序。在事件冒泡过程中,事件首先在最具体的元素(通常是触发事件的元素)上触发,然后逐级向上传播至最不具体的...

    javascript事件冒泡和事件捕获详解

    在探讨JavaScript事件冒泡和事件捕获之前,我们首先要了解什么是事件流。事件流指的是当事件发生在DOM树中的元素上时,事件处理的顺序。为了有效地组织事件处理程序,不同的浏览器厂商提出了不同的事件处理机制:...

    JavaScript事件冒泡与事件捕获实例分析

    本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 &lt;body onclick=alert&#40;'body...

    JS事件冒泡浏览器兼容

    JavaScript事件冒泡是Web开发中的一个关键概念,它涉及到用户与网页交互时事件的传递机制。在浏览器环境中,事件冒泡是指事件从最深的节点开始,然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...

    详解javascript事件冒泡

    事件冒泡是JavaScript中非常重要的一个概念,它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中,一旦某个元素上的事件被触发,那么这个事件会从元素本身开始,沿着DOM树向上层元素传播,直到到达根节点。在此...

    javascript阻止事件冒泡的一种方法

    JavaScript中的事件冒泡是事件处理的一个重要概念,它是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)的过程。这个机制允许事件在事件流的每个阶段都...

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    javascript事件冒泡实例分析

    本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下: 事件冒泡:   如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是”由内而外”.验证:...

Global site tag (gtag.js) - Google Analytics