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

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. EventBus代替Intent将复杂对象传递给下一个即将启动的Activity

    我觉得EventBus确实非常好,把我们从序列化中解脱出来,即使不序列化也能在界面间传递数据,但是有个前提,那是两个界面都已经存在并且注册了EventBus.而即将启动的下一个Activity就非常尴 ...

  2. java gui 之容器组件

    演示Frame和Panel package unit7; import java.awt.*; public class SimpleFrame { public static void main(S ...

  3. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  4. psql-01基本介绍

    安装与启动 安装: apt-get install postgresql / yum install postgresql.XXX; 启动: mac下直接打开 linux service postgr ...

  5. zepto的bug2

    zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以zepto不支持animate({scrollTop:"100px" ...

  6. http://blog.csdn.net/hitmediaman/article/details/6636402

    http://blog.csdn.net/hitmediaman/article/details/6636402

  7. spring4 mvc 出错

    java.lang.IncompatibleClassChangeError: class org.springframework.core.type.classreading.ClassMetada ...

  8. SPFA(建图) HDOJ 4725 The Shortest Path in Nya Graph

    题目传送门 题意:有两种路径,每个点会分别在某一层,层相邻之间权值c.还有直接两点传送,花费w.问1到n的最短距离. 分析:1~n正常建边.然后n + a[i]表示i点在第a[i]层.然后再优化些就不 ...

  9. PE-2 & 暴模...

    题意: 求不大于4000000的斐波那契数列中,所有偶数之和. SOL: 还是只会暴模...看讨论区貌似有一个很牛逼的大神的发言? 英语水平太差... mark以下 The Fibonacci seq ...

  10. BZOJ 1831 & 就是一个DP....

    题意: 比如说,4 2 1 3 3里面包含了5个逆序对:(4, 2), (4, 1), (4, 3), (4, 3), (2, 1). 可惜的是,由于年代久远,这些数字里有一部分已经模糊不清了,为了方 ...