`
liuxiang123
  • 浏览: 29837 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

js 事件冒泡解决方案

阅读更多

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

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

 

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



友情提示:事件冒泡不一定是个坏的东西,有些情况会让不同层次捕获不同的事件!

 

 

分享到:
评论

相关推荐

    javascript mouseover、mouseout停止事件冒泡的解决方案

    停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。

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

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...

    JavaScript30:我对30天香草JS挑战的解决方案

    此包含针对的解决方案。 检查清单 第一天 第2天 第三天- 第4天- 第5天 第6天- 第7天-Array Cardio第2天 第8天-体验HTML5画布 第9天-第14天必须了解开发工具技巧 第10天-按住Shift键以选中多个复选框 第...

    Javascript 事件流和事件绑定

    IE上的解决方案就是冒泡型事件(Dubbed Bubbling)。冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML...

    JavaScript事件委托技术实例分析

    事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个需要触发事件...

    coding-challenges

    描述解决方案0102030405060708 斐波那契数列解决方案09 使用递归的字符串...冒泡排序解决方案20 实施选择排序解决方案21 实现单链表解决方案22 实现归并排序解决方案23 实现快速排序解决方案24 实现基数排序解决方案25 ...

    Web-front-end-knowledge-summary:前端知识点总结

    JavaScript基础DOM(文档对象模型)JavaScript 基本数据类型和引用数据类型JS数据类型判断事件冒泡和事件捕获js中的事件委托或事件代理详解DOM 事件模型JS函数防抖和函数节流JavaScript 设计模式跨域解决方案页面间...

    awesomejs:一些关于前端方面的总结,欢迎star~

    跨域解决方案 6. NodeJS相关 cluster 7. Vue相关 Component Computed Data Dep Diff Directives Event Filters LifeCycle Methods Mixins Mount NextTick Props Slot VModel VNode Vue3 Watch 8. 手写JavaScript代码...

    快速解决js开发下拉框中blur与click冲突

    下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。 一、blur和click事件简述 blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以。 click事件:...

    JavaScript 学习笔记(十五)

    一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。 过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发...

    JS-Bubble-Sort

    Main.JS视频将包含针对JS Bubble排序问题的多种解决方案。 冒泡排序背后的逻辑和复杂性: 让我们使用Big-O表示法计算冒泡排序算法所涉及的复杂性。 对于大小为N的数组,它需要N步才能完成第1遍,但由于我们不遍历...

    js-bubble-sort

    在JavaScript中实现冒泡排序 气泡排序练习 您将在JavaScript中实现冒泡排序。 在进行冒泡排序实现之前,还应查看一个茉莉花规格。 指示 查看spec/bubbleSortSpec.... 尝试执行此操作而不在线查找解决方案。 有用的资源

    leetcode给单链表加一js实现-javascript-algorithms:JavaScript实现的一些数据结构和Javascript

    问题的一些解决方案。 数据结构 用 Javascript 实现的数据结构。 堆 队列 单链表 双向链表 树 《IT面试》中的问题 堆栈和队列 堆栈与getMin和reverse 带有由另一个堆栈实现的sort的堆栈 狗和猫的队列 河内塔通过递归...

    js-sorting-algo-exercises:与解决方案

    用JavaScript实现排序算法第1部分:气泡排序,选择排序,插入排序尝试实现冒泡排序,选择排序和插入排序(如果您需要对这些算法进行复习,请查看)。 对于这些算法中的每一种,您还将发现实现swap函数以交换到数组中...

    gschool_bubble-sort

    在JavaScript中实现冒泡排序气泡排序练习您将在JavaScript中实现冒泡排序。 在进行冒泡排序实现之前,还应查看一个茉莉花规格。指示查看spec/bubbleSortSpec.js规范... 尝试执行此操作而不在线查找解决方案。有用的资源

Global site tag (gtag.js) - Google Analytics