JS中的事件阻止冒泡_事件阻止默认行为

在日常当中，由于事件委托，当一个大盒子div1中镶嵌着一个小盒子div2的时候，在执行div1的时候相继会执行div2,由于事件委托，会再一次执行div1.如果光执行div2的话，那么只会执行一次div1就结束了。这个时候需要用上事件阻止冒泡这个方式，执行div2和执行div1是两码子的事情。例如：

var box1=document.getElementById("box1");
box1.onclick=function(e){
	var e=window.event||e;
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble=true;
	}
}

这里给大家解释一下，上节课告诉过大家，var e=window.event || e;是做一个非IE和IE的兼容处理，window.event 表示IE，而e表示非IE，而IE又分IE8及以下和IE9、10这两种情况，e.propagation()表示IE9、10，而e.cancelbubble=true;表示IE8及以下。如果是事件阻止默认行为的话，比如我们常见的阻止弹框，阻止右击出现菜单，阻止链接跳转等等，这些情况如果不需要都能进行阻止。

document.oncontextmenu=function(e){
	var e=window.event||e;
	if(e.preventDefault){
		e.preventDefault();
	}else{
		e.returnValue=false;
	}
}

解释一下，同样是做兼容处理，var e=window.event || e;然后IE两种情况分IE8及以下和IE9、10这两种情况，e.preventDefault();是IE8及以下，而e.returnValue=false;是IE9、10这种情况。这样的话在浏览器文档内部右击鼠标的话是不会弹出菜单项的，因为在任何浏览器内都能正常阻止该事件的默认行为。