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

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. 关闭Android/iPhone浏览器自动识别数字为电话号码

    <meta name="format-detection" content="telephone=no"><meta http-equiv=& ...

  2. Ipython console in Spyder stuck on “connecting to kernel”

    简短地记录下,今天排除的spyder的BUG, 现象:打开Spyder时其他正常,但是Ipython console 不能正常获取到kernel,一直转圈,显示“connecting to kerne ...

  3. String equals（）方法使用以及子串加密

    String equals()方法的实现方法: 名称 说明 String.Equals (Object) 确定此 String 实例是否与指定的对象(也必须是 String)具有相同的值. Strin ...

  4. Oralce 常用语句

    注:大写代表需要替换掉额 --更新字段名 alter table TABLE rename column COL_OLD to COL_NEW --添加字段名 alter table TABLE ad ...

  5. .net平台下垃圾回收机制

    引言:使用c++进行编程,内存的处理绝对是让每个程序设计者最头疼的一块了.但是对于.net平台下使用c#语言开发系统,内存管理可以说已经不算是问题了.在.net平台下CLR负责管理内存,CLR中的垃圾 ...

  6. CF#335 Lazy Student

    Lazy Student time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  7. 【python游戏编程之旅】第六篇---pygame中的Sprite（精灵）模块和加载动画

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 直到现在我们已经学了很多pygame基础知识了,从这篇博客开始我们将会学习pygame中高级部分,更多和精灵 ...

  8. unity gizmo绘制圆形帮助调试

    using UnityEngine; using System.Collections; using System; public class LearnGrazio : MonoBehaviour ...

  9. BZOJ3659 : Which Dreamed It

    首先判断一下是否无解,并剔除孤立点. 根据best theorem,有向图中以$i$为起点的欧拉回路个数为: 以$i$为根的树形图个数$\times\prod_{i=1}^n (deg(i)-1)!$ ...

  10. 常用JS正则表达式

    常用JS正则表达式 收集一些常用的JavaScript正则表达式匹配规则,比如匹配电话号码.Email.中文字符.身份证号.邮编.QQ号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...