zoukankan      html  css  js  c++  java
  • jq 事件冒泡总结

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

    如何来阻止Jquery事件冒泡? 
    通过一个小例子来解释 

    <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%> 
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <htmlxmlns="http://www.w3.org/1999/xhtml"> 
    <headrunat="server"> 
    <title>Porschev---Jquery事件冒泡</title> 
    <scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script> 
    </head> 
    <body> 
    <formid="form1"runat="server"> 
    <divid="divOne"onclick="alert('我是最外层');"> 
    <divid="divTwo"onclick="alert('我是中间层!')"> 
    <aid="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(); 


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


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

    2.returnfalse; 
    如果头部加入的是以下代码 


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


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

    由此可以看出: 
    1.event.stopPropagation(); 
    事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转) 
    2.returnfalse; 
    事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 
    还有一种有冒泡有关的: 
    3.event.preventDefault(); 
    如果把它放在头部A标签的click事件中,点击“点击我”。 
    会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 
    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

  • 相关阅读:
    洛谷—— P3353 在你窗外闪耀的星星
    洛谷—— P1238 走迷宫
    洛谷—— P1262 间谍网络
    9.8——模拟赛
    洛谷—— P1189 SEARCH
    算法
    May 22nd 2017 Week 21st Monday
    May 21st 2017 Week 21st Sunday
    May 20th 2017 Week 20th Saturday
    May 19th 2017 Week 20th Friday
  • 原文地址:https://www.cnblogs.com/timejs/p/4669040.html
Copyright © 2011-2022 走看看