事件冒泡与阻止冒泡

一、事件冒泡：
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）且事件冒泡与位置无关，只跟html代码中的层级关系有关系。例：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
   div2.onclick = function(){alert(1);};
   div1.onclick = function(){alert(2);};//父亲
//html代码

 <div id="div1">
    <div id="div2"></div>
 </div>

在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2

二、事件冒泡的阻止：

1、事件绑定加stop：

@click.stop

2、绑定事件加

event.stopPropagation();

举例：

 <el-form-item label="选择或导入用户:" :required="true">
          <div class="user-div" @click="openSelectUserDialog">
            <template v-if="formValidate.receiverList && formValidate.receiverList.length > 0">
              <template v-for="(item, index) in formValidate.receiverList">
                <span class="user-item" :title="item" :key="index">{{
                  item.userName + '(' + item.userAccount + ')'
                }}</span></template
              >
            </template>
            <!--导入-->
            <div class="export-div">
              <span>
                <label class="button text-overflow">
                  <a @click.stop="exportHandler($event)">导入</a>
                </label>
                <label class="button text-overflow">
                  <a @click.stop="downloadExcel($event)">下载模板</a>
                </label>
              </span>
            </div>
          </div>
          <form id="exportFileForm" class="upload-form">
            <input
              @change="exportUser($event)"
              ref="exportFileForm"
              type="file"
              id="exportFile"
              style="position:absolute;clip:rect(0 0 0 0);"
              accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              class="upload-label"
            />
          </form>
        </el-form-item>
		
		
		 //导入点击事件
    exportHandler(event) {
      this.$refs.exportFileForm.click();
      // event.stopPropagation();
    },
    //导入用户
    exportUser(ev) {
      var fileList = ev.target.files;
      let file = fileList[0];
      let formData = new FormData();
      formData.append('file', file);
      //清空本次选择的文件
      this.$refs.exportFileForm.value = '';
      this.$api['user/batchExportUser'](formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        timeout: 300000
      }).then(data => {
        if (data) {
          this.formValidate.receiverList = data;
          this.selectUserDialogVisible = true;
        }
      });
    }

el-checkbox标签内的内容，绑定点击事件，点击的时候会触发选中/不选中，如果不希望事件冒泡，可以使用

event.preventDefault();

@click="clickToUserDetail($event, user)"

clickToUserDetail(e,user){
     //阻止事件传递，阻止选中
      e.preventDefault();
    ...
}