Events事件传播测试实例

方式一、使用onClick直接在元素中注册事件

<div class="A" onclick="get(event)">A
	<div class="B"  onclick="get(event)">B
		<div class="C"  onclick="get(event)">C
	
		</div>
	</div>
</div>

<script>  
		function get(event){  
			event = event || window.event;   
			//event.stopPropagation();
			event.target = event.srcElement || event.target || document;   	
			var className = "e.target.className："+ event.target.className;   	
			className = className + " || e.currentTarget.className："+ this.className;   	
			alert(className);  
		}
</script> 

方式二、使用onClick直接在元素中注册事件

function getTest(e){
	//e.stopPropagation();
	var c = "e.target.className："+ e.target.className;
	c = c + "| this.className："+ this.className;
	alert(c); 
};
		
	$(".A").click(getTest);
	$(".B").click(getTest);
	$(".C").click(getTest);

1、点击C，将弹出 3 次，事件的执行

e.target.className：C| this.className：C

e.target.className：C| this.className：B

e.target.className：C| this.className：A

加上“event.stopPropagation();“后将只弹出1次：e.target.className：C || this.className：C

2、注释C的click事件，点击C，将弹出 2 次，事件的执行

e.target.className：C| this.className：B

e.target.className：C| this.className：A

3、注释C、B的click事件，点击C，将弹出 1 次，事件的执行

e.target.className：C| this.className：A

 

一、停止事件的传播

event.stopPropagation ()    

this.originalEvent.cancelBubble = true;   //原始事件的cancelBubble属性设置为true(IE)

二、取消事件的默认动作 

event..preventDefault();

event.returnValue = false ;           //IE设置