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 = false
                this.$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-confirm
    v-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 = true
        console.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,也是利用了事件冒泡的原理