一、事件冒泡:
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到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();
...
}