js 事件冒泡 事件委托 事件穿透 事件捕获 以及如何阻止事件冒泡 阻止事件的默认行为 event.stopPropagation() event.preventDefault()，return f

1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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

3.return false  ；

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

事件冒泡应用场景（事件穿透）：
一，封装弹窗组件的时候

<template><div class="confirmBgc" :style="{backgroundColor:rytColor}" v-show="show" @click="closeConfirm"><transition name="scale"><div class="rytContainer" :style="{borderRadius:rytBorderradius}" @click="stopPogation"><h2 class="rytTitle" v-if="title">{
   {title}}</h2><div class="rytContent parent"><slot name="content"></slot></div><div class="rytButtons"><div class="button cancel" @click="clickCancel">{
   {cancel}}</div><div class="rytline"></div><div class="button confirmStyle" @click="clickConfirm">{
   {confirm}}</div></div></div></transition></div>
</template>
<!-- slot 插槽又叫内容分发 将父组件的内容放到子组件的指定位置就叫做内容分发 -->
<!-- <slot name="content"></slot>  此为插槽具名用法，在父父组件中只需要 <标签名 slot="content">内容部分</标签名> 即可-->
<script>export default {name:'modalConfirm',props:{rytColor:{type:String,default:'rgba(0,0,0,0.6)'},rytBorderradius:{type:String,default:'12px'},title:{type:[String,Boolean],default:'rrr'},cancel:{type:[String],default:'取消'},confirm:{type:[String],default:'确定'},showModalconfirm:{type:Boolean,default:false}},data(){return{show:false,}},methods:{stopPogation(e){ //阻止事件冒泡，点击白色区域不会关闭弹窗e.stopPropagation()},closeConfirm(){ //点击半透明背景色关闭确认弹窗this.show = false},clickCancel(){this.show = false},clickConfirm(){this.show = falsethis.$emit('oncilckConfirm')}},watch:{showModalconfirm(val){this.show = val},show(val){this.$emit('input',val)}}}
</script>
<style scoped> .parent{position: relative;}.parent::after {  /*利用缩放和伪元素解决1px在不同手机有粗有细问题*/margin:auto auto;width:295px;position: absolute;bottom: 0;left: 0;right: 0;content: "";box-sizing: border-box;height: 1px;border-bottom: 1px solid #e8e8e8;transform: scaleY(0.5);transform-origin: 0 0;}.rytContainer{width:295px;background-color: #fff;position: fixed;top:50%;left:50%;transform:translate3d(-50%,-50%,0);}
/*    弹框动画*/.scale-enter-active{animation:myscale 5s;}.scale-leave-active{animation:myscale 5s reverse;}@keyframes myscale{0%{transform: scale(0);  /*开始为原始大小*/}50%{transform: scale(0.5);}100%{transform: scale(1);}}@-webkit-keyframes myscale {0%{transform: scale(0);  }50%{transform: scale(0.5);}100%{transform: scale(1);}}.confirmBgc{width:100%;height:100%;position:fixed;top:0px;left:0px;}.rytTitle{font-size: 20px;color:#333;font-weight: 700;height:44px;line-height: 44px;}.rytContent{font-size: 16px;color:#333;box-sizing: border-box;padding:0px 20px;padding-bottom: 16px;}.rytButtons{height:48px;color:#333;display: flex;flex-direction: row;justify-content: flex-start;}.button{width:50%;text-indent: center;height:42px;line-height: 42px;}.confirmStyle{color:#FF8200;}.rytline{width:1px;height:42px;background-color: #e8e8e8;/*以下代码是实现line线在x轴上的缩放，使线在不同手机上都显示的比较细*/transform: scaleX(0.5);transform-origin: 0 0;}
</style>

父组件：
 

<template><div class="about marquee"><button @click="clickConfirm">点击确认弹框modalConfirm</button><modal-confirmv-model="rytModalconfirm":showModalconfirm="rytModalconfirm"@oncilckConfirm="clickConfirmBtn"title="请确认"><span slot="content">身份证姓名与实名认证不符,是否更换为识别到的身份证姓名</span></modal-confirm></div>
</template><script>import modalConfirm from '../../components/modal-confirm/modalConfirm.vue';  //下拉框带popup蒙层
export default {name:'ceconfirm',components: { //注册组件modalConfirm},data() {return {rytModalconfirm:false,};},methods: {//modalconfirm 确认弹框逻辑clickConfirm(){this.rytModalconfirm = trueconsole.log(this.rytModalconfirm ,'clickConfirm')},clickConfirmBtn(){ //点击了确认弹窗的确认按钮触发的事件console.log('请继续点击了confirm弹框确定按钮的逻辑')}},}
</script><style scoped></style>

二,事件冒泡 （事件委托）场景二

<ui><li></li><li></li><li></li><li></li></ui>

给多个li设置相同的事件的时候， 可以把该事件设置给li的父级元素ui,也是利用了事件冒泡的原理