阻止冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box1{width: 400px;padding: 50px;background: red} #box2{width: 300px;padding: 50px;background: yellow} #box3{width: 200px;padding: 50px;background: green} </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> <script type="text/javascript"> var box1 = document.getElementById("box1") var box2 = document.getElementById("box2") var box3 = document.getElementById("box3") box1.onclick = fn; box2.onclick = fn; box3.onclick = fn; function fn(e){ var e = e||window.event; e.cancelBubble = true; alert(this.id); //把你家的门关上 // e.stopPropagation(); } </script> </body> </html>冒泡例子
onmouseenter (阻止冒泡) onmouseover (不阻止) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box{width: 400px;margin: 30px auto;position: relative} #list li{float: left;width: 98px;height: 35px;background: #960;border-right: 1px solid #333} #list li:last-child{border: none;} #hide{width: 98px;height: 150px;background: red;position: absolute;top: 35px;left: 0;display: none;} </style> </head> <body> <div id="box"> <ul id="list"> <li id="li"></li> </ul> <div id="hide"></div> </div> <script type="text/javascript"> var liDom = document.getElementById("li"); var hide = document.getElementById("hide"); // 同时触发了document.onmouseover 冒泡 liDom.onmouseenter = function(e){ //onmouseenter则默认阻止冒泡 var e = e||window.event; // 阻止冒泡 // e.cancelBubble = true; hide.style.display = "block"; }; hide.onmouseover = function(e){ var e = e||window.event; e.cancelBubble = true; this.style.display = "block"; } document.onmouseover = function(){ hide.style.display = "none"; } </script> </body> </html>表单冒泡例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} div{width: 700px;margin: 30px auto} table{border-collapse: collapse;width: 100%;} table td{width: 50px;height: 30px;border: 1px solid #333} </style> </head> <body> <div> <table> <tr> <td><input type="checkbox"></td> <td>A111</td> <td>A222</td> <td>A333</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>B111</td> <td>B222</td> <td>B333</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>C111</td> <td>C222</td> <td>C333</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>D111</td> <td>D222</td> <td>D333</td> <td><a href="#" onclick="del(this)">删除</a></td> </tr> </table> </div> <script type="text/javascript"> var tDoms = document.querySelectorAll('table td'); for(var i=0;i<tDoms.length;i++){ if(tDoms[i].children[0]){ //复选框 冒泡 =>会触发td点击事件==>就会没效果 bind(tDoms[i].children[0],"click",function(e){ var e = e || window.event; var mark = this.checked; if(mark){ this.parentNode.parentNode.style.background = 'yellow'; this.parentNode.querySelector('input').checked = true; }else{ this.parentNode.parentNode.removeAttribute("style"); }; e.cancelBubble = true; //阻止冒泡=>td }); } bind(tDoms[i],"click",function(){ var mark = this.parentNode.querySelector('input').checked; if(!mark){ this.parentNode.style.background = 'yellow'; this.parentNode.querySelector('input').checked = true; }else{ this.parentNode.removeAttribute("style"); this.parentNode.querySelector('input').checked = false; }; }); }; function del(obj){ var tr = obj.parentNode.parentNode; var table = tr.parentNode; table.removeChild(tr); } // 兼容写法 function bind(obj,eventName,fn){ if(obj.attachEvent){ obj.attachEvent("on"+eventName,function(){ fn.call(obj);//this指向 }) }else{ obj.addEventListener(eventName,fn,false); } }; </script> </body> </html>