首先看下JS的事件模型,JS事件模型爲向上冒泡,如onclick事件在某一DOM元素被觸發後,事件將跟隨節點向上傳播,直到有click事件綁定在某一父節點上,若是沒有將直至文檔的根。html
阻止冒泡:一、對於非IE瀏覽器:stopPropagation()。二、對於IE瀏覽器:cancelBubble屬性爲true瀏覽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .wraper { width: 400px; height: 400px; border: 1px solid #000; margin: 0 auto; position: relative; } .menu_zone { width: 50%; height: 50px; background: #aaa; } .model_zone { position: absolute; width: 50%; height: 200px; background: #cac; display: none; } </style> </head> <body> <div class="wraper"> <div id="menu" class="menu_zone">點擊我顯示菜單</div> <div id="model" class="model_zone">我是菜單</div> </div> <script> function $(id) { return document.getElementById(id) } var oMenu = $("menu"), oModel = $("model"); document.onclick = function () { oModel.style.display = "none"; } // 方法一:使用dom0方式 // oMenu.onclick = function(e){ // stopFunc(e); // oModel.style.display = "block"; // } // oModel.onclick = function(e){ // stopFunc(e); // } //方法二:使用dom2方式 oMenu.addEventListener('click', function (e) { stopFunc(e); oModel.style.display = "block"; }, false) oModel.addEventListener('click', function (e) { stopFunc(e); }, false) //阻止事件向上傳遞 function stopFunc(e) { e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; } </script> </body> </html>
效果以下:dom