javascript 事件冒泡处理方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ljk126wy/article/details/83376884

在工作中遇到 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;
	  });