• 取消事件冒泡


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>New Web Project</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
    #mybigdiv {
    300px;
    height: 300px;
    border: 1px solid red;
    }
    #myid {
    100px;
    height: 100px;
    border: 1px solid red;
    }
    </style>

    <script type="text/javascript">
    //取消事件冒泡
    //第一道能力检测:分浏览器
    $(function(){
    //给大div注册事件
    $("#mybigdiv").click(function(){
    alert('我是大div');
    });

    //小div
    $("#myid").click(function(event){
    alert('我是小div');
    //UI工程师 能力检测
    //判定浏览器引擎是IE还是其他浏览器(第一道 能力检测)
    event=event||window.event;
    //第二道能力检测
    if(event.stopPropagation){//非IE浏览器
    event.stopPropagation();
    }else{
    //IE浏览器
    event.cancelBubble=true;
    }
    });
    });

    </script>
    </head>
    <body>
    <div id="mybigdiv">我是大div
    <div id="myid">我是小div</div>
    </div>
    </body>
    </html>




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
    <script type="text/javascript" >

    $(function(){
    $("#myhref").click(function(event){
    //能力检测
    event=event||window.event;
    if(event.preventDefault){ //非IE下内核 webkit引擎
    event.preventDefault();
    }else{
    event.returnValue=false; //IE引擎
    }

    });
    });


    </script>

    </head>
    <body>
    <a id="myhref" href="http://www.cnblogs.com">去百度</a>
    </body>
    </html>

  • 相关阅读:
    Linux 远程和本地的一些解决方式
    【Android界面实现】使用PagerTabStrip实现有滑动标签的Viewpager
    Elasticsearch
    Awk使用及站点日志分析
    我的软考之路(八)——三大原则学会数据流图
    BZOJ 3864 Hero meet devil DP套DP
    Android studio 自己定义打包APK名称
    C/C++——程序的内存分配
    剑指offer 高速排序
    HDU1069(还是dp基础)
  • 原文地址:https://www.cnblogs.com/Chenghao-He/p/7100752.html
Copyright © 2020-2023  润新知