html 事件重叠,防止烧事件重叠HTML元素

事件对象作为两个属性，可以帮助你完成这个任务：

event.currentTarget在事件遍历DOM时标识事件的当前目标。它始终引用事件处理程序已附加的元素，而不是event.target，它标识事件发生的元素。 事件通知将传递给外部div两次，第一次在捕获阶段，后面在冒泡阶段，如果您在内部div中实例化处理程序，它将被通知。您可以在需要时停止传播。

document.getElementById("outer").addEventListener('click',etvFn,true);

document.getElementById("outer").addEventListener('click',etvFn,false);

document.getElementById("inner").addEventListener('click',etvFn,true);

document.getElementById("inner").addEventListener('click',etvFn,false);

document.getElementById("innerP").addEventListener('click',etvFn);

function etvFn(evt){

var phase;

if(evt.eventPhase === 1){

phase = "Capture";

}else if(evt.eventPhase === 2){

phase = "Target";

}else{

phase = "Bubbling";

}

alert("Target:" + evt.target.id + "\nCurrent Target:" + evt.currentTarget.id + "\nPhase:" + phase);

}​