1 var father = document.getElementById('father'); 2 var btn = document.getElementById('btn'); 3 4 btn.addEventListener('click', function (event) { 5 // 阻止冒泡 6 if(event && event.stopPropagation){ // w3c标准 7 event.stopPropagation(); 8 }else{ // IE系列 IE 678 9 event.cancelBubble = true; 10 } 11 12 alert('点击了按钮'); 13 }); 14 15 father.addEventListener('click', function (ev) { 16 // 阻止冒泡 17 if(event && event.stopPropagation){ // w3c标准 18 event.stopPropagation(); 19 }else{ // IE系列 IE 678 20 event.cancelBubble = true; 21 } 22 23 alert('点击了父标签'); 24 }); 25 26 document.addEventListener('click', function (ev) { 27 alert('点击了文档'); 28 }); 29 30 //阻止冒泡的兼容
1 /* 2 element.addEventListener(event, function, useCapture) 3 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 4 5 可能值: 6 true - 事件句柄在捕获阶段执行 先触发父--子 7 false- false- 默认。事件句柄在冒泡阶段执行 先触发 子--父 8 */ 9 10 var father = document.getElementById('father'); 11 var btn = document.getElementById('btn'); 12 13 btn.addEventListener('click', function (event) { 14 alert('点击了按钮'); 15 }, true); 16 17 father.addEventListener('click', function (ev) { 18 alert('点击了父标签'); 19 }, true); 20 21 document.addEventListener('click', function (ev) { 22 alert('点击了文档'); 23 }, true);
捕获阶段不能阻止冒泡