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

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 无法部署】svn上下载的maven项目无法部署到tomcat中

    问题: svn上下载的maven项目无法部署到tomcat中,tomcat不识别项目,但是这个项目确实是web项目 发现的过程: 然后依次产看项目的编译版本: 项目的依赖架包: 才发现: 解决方法: ...

  2. Android集成支付宝的坑

    Android在集成支付宝sdk的时候, 如果有安装支付宝,则启动支付宝app进行支付: 如果没有安装,则启动 H5PayActivity 进行支付. 记得在AndroidManifest里面配置: ...

  3. TCP拆包粘包之分隔符解码器

    TCP以流的方式进行数据传输,上层的应用协议为了对消息进行区分,往往采用如下4种方式. (1)消息长度固定,累计读取到长度总和为定长LEN的报文后,就认为读取到了一个完整的消息:将计数器置位,重新开始 ...

  4. PHP 设置代码执行时间

    <?php ini_set('max_execution_time', '0'); set_time_limit(0); ?>

  5. 20145223《Java程序程序设计》第4周学习总结

    20145223 <Java程序设计>第4周学习总结 教材学习内容总结 面向对象中,子类继承父类避免重复的行为定义,不过并不是为了避免重复定义行为就使用继承.程序代码重复在以后修改代码的时 ...

  6. wpf中dropdownButton控件下拉居中。。。

    设置模版中popup控件的HorizontalOffset属性来控制居中. 还是对popup控件不熟,折腾了一会.

  7. 不同java 版本的新功能

    Java 5 泛型 自动装箱/拆箱 增强的for 类型安全的枚举 可变参数 静态导入 Annotation Concurrent Package Java 6 Web Service 支持Annota ...

  8. HDU3820 Golden Eggs（最小割）

    题目大概说给一个n*m的格子,每个格子放金蛋或银蛋都会得到不同的价值,当然也可以不放,不过如果存在相邻的两个格子都是金蛋会损失价值g,都是银则损失s.问能得到的最大价值. 有点像二者选一的最小割模型, ...

  9. BZOJ2758 : [SCOI2012]Blinker的噩梦

    首先将包含关系建树. 方法是将每个图形拆成上半边和下半边,从左往右扫描线,用Splay从下到上维护扫描线上所有图形. 每次加入一个新的图形$x$的时候,看看它下方第一个图形$y$,如果$y$是上半边, ...

  10. iframe更新与隐藏

    http://blog.sina.com.cn/s/blog_535161d80100aho6.html 从近期项目中抽取出来的一个关于iframe进行控制的代码,不是很全,不过大体功能已经显示出来了 ...