jquery点击内联触发外层事件,event.stopPropagation()和event.preventDefault()

阻止 事件冒泡 的三个方法：

1.event.stopPropagation()方法

阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法

阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false  ；

这个就比较粗暴，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用event.stopPropagation()和event.preventDefault()

实例演示，使用jquery操作demo：

html代码，div里面还放了一个div,实现点击效果：

css代码，里面div占外div的50%空间，大的div背景色设置了透明度：

	        *{
				margin: 0 auto;
				padding: 0;
			}
			html ,body{
				width: 100%;
				height: 100%;
				background-image: url("../测试案例/img/202106021648330155181.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.aa{
				width: 100%;
				height: 100%;
				background-color: #12131342;
			}
			.bb{
				z-index: 99;
				float: left;
				width: 50%;
				height: 100%;
				background-color: #a87396;
			}

效果图如下,图片为背景照：

 下面js代码，

第一种：

        $(".aa").click(function(){
			alert("我是大盒子")
			
		})
		$(".bb").click(function(){
			event.stopPropagation()
			alert("我是里面一个div")
		})

点击紫色区域，就是里面的div，只会出发它的点击事件，同样透明度区域也只会出发他所领域的空间的事件。

第二种：

    	$(".aa").click(function(){
			alert("我是大盒子")
			
		})
		$(".bb").click(function(){
			event.preventDefault()
			alert("我是里面一个div")
		})

点击紫色区域，里面div的同时 也会触发到外面的div盒子，会有两次弹窗，当然点击透明快，只会出发外面div的点击事件。

第三种：

        $(".aa").click(function(){
			return false;
			alert("我是大盒子")
			
		})
		$(".bb").click(function(){
			return false;
			alert("我是里面一个div")
		})

两个事件都不会被触发！