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

    代码是这样的

    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("li").live("click", function (event) {
                    $(this).css("color", "#FF3300");
                })
            });
        </script>
    </head>
    <body>
        <ul>
            <li>第一行
                <ul>
                    <li>这是公告标题1</li>
                    <li>这是公告标题2</li>
                </ul>
            </li>
        </ul>
    </body>
    </html>

    现在通过Firebug来查看一下事件冒泡的效果。

    刚开始是这样的,如下图所示:

    当点击"这是公告标题1"时,不仅点击的 li 标签有了样式,父标签 li 也有了样式,这是我们不想得到的结果。


    如果把代码改成这样,就能避免事件冒泡带来的麻烦。

      $("li").live("click", function (event) {
            $(event.target).css("color", "#FF3300");
       })
    event.target 可以获得事件源。
    $("li").live("click", function (event) {
            $(this).css("color", "#FF3300");
            event.stopPropagation();
     })

    这样也可以,event.stopPropagation();这个是阻止事件冒泡的!

    下面是阻止时间冒泡的例子。

    <div onclick="showMsg(this,event)" id="outSide" style="100px; height:100px; background:#000; padding:50px">
    
    <div onclick="showMsg(this,event)" id="inSide" style="100px; height:100px; background:#CCC"></div>
    
    </div>
    
    <script type="text/javascript">
    //阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比)
    function showMsg(obj,e)
    {
        alert(obj.id);
        stopBubble(e)
    }
    
    
    //阻止事件冒泡函数
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation()
        else
            window.event.cancelBubble=true
    }
    </script>

    参考:

    http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html

    http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html

  • 相关阅读:
    技术为辅,思维主导
    阶段性目标的设置
    非计算机专业测试之路
    第四章 Appium真机运行测试用例讲解
    第三章 Appium API介绍
    第二章 测试环境搭建(下)
    第二章 测试环境搭建(上)
    第一章 Appium简介
    测试人员的工作经验值钱吗
    2017 年该学习的编程语言、框架和工具
  • 原文地址:https://www.cnblogs.com/yokoboy/p/2807771.html
Copyright © 2011-2022 走看看