//阻止事件冒泡的兼容写法

function stopBubble(e){

    //如果提供了事件对象，则是一个非IE浏览器

    if(e && e.stopPropagation)

        //因此它支持W3C的stopPropagation()方法

        e.stopPropagation();

    else

        //否则，我们需要使用IE的方式来取消事件冒泡

        window.event.cancelBubble = true;

}
 <!doctype html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>js事件冒泡 </title>

     <meta name="keywords" content=""/>

     <meta name="description" content=""/>

     <style type="text/css">

         *{margin:0;padding:0;}

         body{font-size:16px;font-family:"微软雅黑";color:#666;

             background:#fff;

         }

         #tab{width:100%;margin:60px auto;;}

         #tab td{height:35px;line-height:35px;text-align:center;}

     </style>

 </head>

 <body>

     <table id="tab" border="1">

         <tr>

             <td><input type="checkbox" /></td>

             <td>111</td>

             <td>222</td>

             <td>333</td>

             <td>444</td>

             <td>555</td>

             <td>

                 <a href="javascript:;" onclick="del(event);">删除</a>

                 <a href="javacsript:;" onclick="edit(event);">编辑</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" /></td>

             <td>111</td>

             <td>222</td>

             <td>333</td>

             <td>444</td>

             <td>555</td>

             <td>

                 <a href="javascript:;" onclick="del(event);">删除</a>

                 <a href="javacsript:;" onclick="edit(event);">编辑</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" /></td>

             <td>111</td>

             <td>222</td>

             <td>333</td>

             <td>444</td>

             <td>555</td>

             <td>

                 <a href="javascript:;" onclick="del(event);">删除</a>

                 <a href="javacsript:;" onclick="edit(event);">编辑</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" /></td>

             <td>111</td>

             <td>222</td>

             <td>333</td>

             <td>444</td>

             <td>555</td>

             <td>

                 <a href="javascript:;" onclick="del(event);">删除</a>

                 <a href="javacsript:;" onclick="edit(event);">编辑</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" /></td>

             <td>111</td>

             <td>222</td>

             <td>333</td>

             <td>444</td>

             <td>555</td>

             <td>

                 <a href="javascript:;" onclick="del(event);">删除</a>

                 <a href="javacsript:;" onclick="edit(event);">编辑</a>

             </td>

         </tr>

     </table>

     <script type="text/javascript">

         //点击td给tr加上一个背景色，同时选中checkbox

         var tdDoms = document.querySelector("table").getElementsByTagName("td");

         for(var i=0;i<tdDoms.length;i++){

             tdDoms[i].addEventListener("click",function(){

                 var mark = this.parentElement.querySelector("input").checked;

                 if(!mark){

                     this.parentElement.style.background = "red";

                     this.parentElement.querySelector("input").checked = true;

                 }else{

                     this.parentElement.removeAttribute("style");

                     this.parentElement.querySelector("input").checked = false;

                 }

             });

         }

         function del(e){

             alert(9);

             //e.stopPropagation();

             stopBubble(e);

         }

         function edit(e){

             alert(8);

             stopBubble(e);

         }

         //阻止事件冒泡的兼容写法

         function stopBubble(e){

             //如果提供了事件对象，则是一个非IE浏览器

             if(e && e.stopPropagation)

                 //因此它支持W3C的stopPropagation()方法

                 e.stopPropagation();

             else

                 //否则，我们需要使用IE的方式来取消事件冒泡

                 window.event.cancelBubble = true;

         }

     </script>

 </body>

 </html>

javascript阻止事件冒泡的兼容写法及其相关示例的更多相关文章

  1. JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  2. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  3. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  4. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  5. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

  6. javascript 阻止事件冒泡

    阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...

  7. JavaScript阻止事件冒泡

    今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...

  9. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

随机推荐

  1. CentOS配置本地yum源（使用镜像iso文件）

    本人在使用yum安装软件的时候,感觉最不爽的是网络不佳时,安装的速度特别慢.所以,个人就上网search了一下如何使用Linux的安装文件作为其yum源.经过几次尝试,已经可以成功的配置了.下面是详细 ...

  2. file-max与ulimit的关系与差别

    典型的,提供大量静态文件访问的web服务器,缓存服务器(如squid), 均要注意这个问题 网上的教程,大约只是简单说明了如何设置ulimit和file-max, 但并没有说清楚这两者之间的差别,让人 ...

  3. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...

  4. 课堂随笔 set （集合)

    1.什么是集合:set   (集合)为无序不重复的序列. 2.如何创建一个集合:(1)set()  这样就创建了一个空的集合(2)s1={11,22,33}这样也创建了一个集合.(3)s2=set([ ...

  5. Linux IO模型和网络编程模型

    术语概念描述: IO有内存IO.网络IO和磁盘IO三种,通常我们说的IO指的是后两者. 阻塞和非阻塞,是函数/方法的实现方式,即在数据就绪之前是立刻返回还是等待. 以文件IO为例,一个IO读过程是文件 ...

  6. 数据库查询Database中的表

    public class UserDA { SqlConnection conn; SqlCommand cmd; public UserDA(Use uuu) { conn =new SqlConn ...

  7. C#性能测试方法

    用 System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch(); watch.Start(); for (int i ...

  8. Mac OS Storm＋Kafka+Zookeeper配置

    先补充一个前两天mac配置的文档. 首先确定由jdk scala环境 JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/Cu ...

  9. Visual Studio: whether auto-building when press the debug button

    Tools -> Options -> Projects and Solutions->Build and Run -> choose an option for On Run ...

  10. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...