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

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. TOMCAT配置外部应用

    原来我们都是把项目放到webapps目录下,但其实是可以把项目放到其他文件夹下的,如果把项目放到其他目录下同时也希望tomcat可以运行它,有两种方法: 第一种方法:   conf/server.xm ...

  2. Almost Sorted Array

    http://acm.hdu.edu.cn/contests/contest_showproblem.php?cid=646&pid=1006 #include<iostream> ...

  3. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  4. 06_Java多线程、线程间通信

    1. 线程的概念      1.1多进程与多线程 进程:一个正在执行的程序.每个进程执行都有一个执行顺序,该顺序是一个执行路径,或叫一个控制单元. 一个进程至少有一个线程. 线程:就是进程中的一个独立 ...

  5. css自适应代码-iphone端

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone4/4s */} @media (dev ...

  6. tonado框架的列表嵌套 （template中for循环嵌套）

            学习了tonado框架,渐渐开始明白模板的转换,以后肯定还会遇到很多问题... 功能描述:       页面显示读取的数据库父导航名称,再通过嵌套列表将子导航名称和地址查询出来,返回到 ...

  7. Redis执行Lua脚本示例

    Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行.使用脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放在red ...

  8. javascript拾掇

    用javascript如何给span赋值呢?一般有两种方法: 1>输出html <body onload="s()"><span id="hell ...

  9. iOSDay27之界面通信

    1. 属性传值(前面的界面给后面传值) 第一步: 在 SecondViewController.h 文件里定义一个存放传过来值的变量 contents #import <UIKit/UIKit. ...

  10. 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法

    众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...