• js事件冒泡


    什么是JS事件冒泡?:

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

     

    怎样来阻止Jquery事件冒泡?
     
    通过一个小样例来解释

    <!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事件中。点击“点击我”。
       会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
     
        它的作用是:事件处理过程中。不阻击事件冒泡。但阻击默认行为(它仅仅运行全部弹框,却没有运行超链接跳转)

  • 相关阅读:
    类成员指针
    css图片旋转
    px转化rem
    flexible.js页面布局
    SpringBoot-静态资源映射
    Springboot-日志框架
    Springboot-配置文件
    spring的xml和注解整合
    在mysql中将JSON数组转换为行数据[转]
    php 拼音
  • 原文地址:https://www.cnblogs.com/llguanli/p/8458491.html
Copyright © 2020-2023  润新知