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設定