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

//阻止事件冒泡的兼容写法
function stopBubble(e){
    //如果提供了事件对象，则是一个非IE浏览器
    if(e && e.stopPropagation)
        //因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    else
        //否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
}
  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title>js事件冒泡 </title>
  6     <meta name="keywords" content=""/>
  7     <meta name="description" content=""/>
  8     
  9     <style type="text/css">
 10         *{margin:0;padding:0;}
 11         body{font-size:16px;font-family:"微软雅黑";color:#666;
 12             background:#fff;
 13         }
 14         #tab{width:100%;margin:60px auto;;}
 15         #tab td{height:35px;line-height:35px;text-align:center;}
 16     </style>
 17 </head>
 18 <body>
 19     
 20     
 21     
 22     
 23     <table id="tab" border="1">
 24         <tr>
 25             <td><input type="checkbox" /></td>
 26             <td>111</td>
 27             <td>222</td>
 28             <td>333</td>
 29             <td>444</td>
 30             <td>555</td>
 31             <td>
 32                 <a href="javascript:;" onclick="del(event);">删除</a>
 33                 <a href="javacsript:;" onclick="edit(event);">编辑</a>
 34             </td>
 35         </tr>
 36         <tr>
 37             <td><input type="checkbox" /></td>
 38             <td>111</td>
 39             <td>222</td>
 40             <td>333</td>
 41             <td>444</td>
 42             <td>555</td>
 43             <td>
 44                 <a href="javascript:;" onclick="del(event);">删除</a>
 45                 <a href="javacsript:;" onclick="edit(event);">编辑</a>
 46             </td>
 47         </tr>
 48         <tr>
 49             <td><input type="checkbox" /></td>
 50             <td>111</td>
 51             <td>222</td>
 52             <td>333</td>
 53             <td>444</td>
 54             <td>555</td>
 55             <td>
 56                 <a href="javascript:;" onclick="del(event);">删除</a>
 57                 <a href="javacsript:;" onclick="edit(event);">编辑</a>
 58             </td>
 59         </tr>
 60         <tr>
 61             <td><input type="checkbox" /></td>
 62             <td>111</td>
 63             <td>222</td>
 64             <td>333</td>
 65             <td>444</td>
 66             <td>555</td>
 67             <td>
 68                 <a href="javascript:;" onclick="del(event);">删除</a>
 69                 <a href="javacsript:;" onclick="edit(event);">编辑</a>
 70             </td>
 71         </tr>
 72         <tr>
 73             <td><input type="checkbox" /></td>
 74             <td>111</td>
 75             <td>222</td>
 76             <td>333</td>
 77             <td>444</td>
 78             <td>555</td>
 79             <td>
 80                 <a href="javascript:;" onclick="del(event);">删除</a>
 81                 <a href="javacsript:;" onclick="edit(event);">编辑</a>
 82             </td>
 83         </tr>
 84     </table>
 85     <script type="text/javascript">
 86         //点击td给tr加上一个背景色，同时选中checkbox
 87         var tdDoms = document.querySelector("table").getElementsByTagName("td");
 88         for(var i=0;i<tdDoms.length;i++){
 89             tdDoms[i].addEventListener("click",function(){
 90                 var mark = this.parentElement.querySelector("input").checked;
 91                 if(!mark){
 92                     this.parentElement.style.background = "red";
 93                     this.parentElement.querySelector("input").checked = true;
 94                 }else{
 95                     this.parentElement.removeAttribute("style");
 96                     this.parentElement.querySelector("input").checked = false;
 97                 }
 98             });
 99         }
100         
101         function del(e){
102             alert(9);
103             //e.stopPropagation();
104             stopBubble(e);
105         }
106         
107         function edit(e){
108             alert(8);
109             stopBubble(e);
110         }
111         //阻止事件冒泡的兼容写法
112         function stopBubble(e){
113             //如果提供了事件对象，则是一个非IE浏览器
114             if(e && e.stopPropagation)
115                 //因此它支持W3C的stopPropagation()方法
116                 e.stopPropagation();
117             else
118                 //否则，我们需要使用IE的方式来取消事件冒泡
119                 window.event.cancelBubble = true;
120         }
121     </script>
122 </body>
123 </html>

 

posted @ 2015-10-20 10:32  悬崖边上  阅读(2263)  评论(0)    收藏  举报