Vue阻止事件冒泡-实现点击div以外区域隐藏该div区域
js中存在事件冒泡,当点击clickSetting时,stopEvent和showSetting事件也会按顺序从内到外依次触发,通过stopEvent可以阻止事件继续冒泡,所以showSetting不会再出发,stopEvent内部可以自由处理业务逻辑。当点击stopEvent区域之外时,就会触发showSetting事件,此时clickSetting就被隐藏了。
<template>
<div class="box" @click="showSetting">
<div class="settingCon" @click="stopEvent($event)">
<div v-show="showSettingCon" @click="clickSetting">现实隐藏区域</div>
</div>
</div>
</template>
showSetting(){
this.$set(this, 'showSettingCon', false);
//全局区域内点击时showSettingCon均为false
},
stopEvent(event){
event.stopPropagation(); //此区域不受上面方法的影响
},
clickSetting(){
//此处处理业务逻辑
}