1. 程式人生 > >javascript 事件冒泡處理方式

javascript 事件冒泡處理方式

在工作中遇到 javascript 冒泡的情況,特此記錄一下。我們要實現點選包含此課程vip上面的區域進行關閉視窗也就是div的隱藏,點選 包含此課程vip 以下的區域不進行關閉視窗,實際效果是下面的點選也會關閉視窗。

下圖是html頁面結構的程式碼, 其中我們在在class 為vip-popoutshade 樣式上新增一個點選事件進行將該div 進行隱藏,預設的情況下 vip-popoutcon也是有點選隱藏的事件的也就是該事件會向下傳遞。但是我們不想在vip-popoutcon 上新增點選隱藏事件。

解決方案:在class 為vip-popoutcon 的click上執行 event.stopPropagation 阻止事件冒泡

	//點選隱藏
	$(".vip-popoutshade").click(function(){
		$(this).hide();
		$(".vip-popoutcon").show();
		$(".base").show();
	})
	//阻止事件冒泡
	  $(".vip-popoutcon").click(function(event) {
	      event.stopPropagation();
	  });

也可以在class 為vip-popoutcon的div click事件中直接retrun false 也可以阻止事件冒泡

	//阻止事件冒泡
	  $(".vip-popoutcon").click(function(event) {
	      //event.stopPropagation();
		  return false;
	  });