一个因@click.stop引发的bug的解决
问题
在项目页面中使用elementpopover，设置trigger='click'时点击外部不会触发自动隐藏，但在element官网中是可以正常触发的（官方示例），项目中的菜单是自定义写的，所以怀疑是有黑魔法。
查找原因
- 将popover写在app.vue根组件内，发现可以正常触发自动隐藏。
- 在app.vue的mounted钩子中加入window.addEventListener('click',()=>console.log('windowclick===>>>>'))，发现只有菜单栏外层能够触发。
- 检查菜单栏组件，发现代码中
确认代码修改没有副作用
在修复bug时，需要注意不会产生额外的bug，那就需要了解修改的这段代码的含义
@click.stop="isShowWhole=false"
从代码上看，点击class为main的div将会触发左边侧边栏缩略显示，加上stop修饰符是为了防止事件冒泡，所以能否去掉stop需要确认是否有这个必要。
//router.js
letroutes=[
{
path:'/',
alias:'/admin',
component:Menu,
children:[...Pages],
},
{
path:'*',
name:'404',
component:NotFound,
},
];
在路由中可以看到，Menu是作为根路由进行渲染，除了404页面都是它的子路由，所以stop修饰符是没有必要加上的，去除后经过测试没有其他影响。
深入elementpopover源码分析原因
对element组件进行debug时，可以直接引入相关组件的源码
importElPopoverfrom'element-ui/packages/popover';
exportdefault{
components:{
CheckboxFilter,
ElPopover
},
...
}
然后我们就可以在node_modules的element源码进行debug操作（危险步骤，debug后需要复原）。
//node_modules/element-ui/packages/popover/src/main.vue
mounted(){
...
if(this.trigger==='click'){
on(reference,'click',this.doToggle);
on(document,'click',this.handleDocumentClick);
}elseif(this.trigger==='hover'){
...
}elseif(this.trigger==='focus'){
...
}
}
popover在mounted钩子内初始化了trigger='click'的事件绑定，on(document,'click',this.handleDocumentClick)这里绑定了document很可能就是阻止事件冒泡后不能触发外部点击隐藏的判断逻辑。
//node_modules/element-ui/packages/popover/src/main.vue
handleDocumentClick(e){
letreference=this.reference||this.$refs.reference;
constpopper=this.popper||this.$refs.popper;
if(!reference&&this.$slots.reference&&this.$slots.reference[0]){
reference=this.referenceElm=this.$slots.reference[0].elm;
}
if(!this.$el||
!reference||
this.$el.contains(e.target)||
reference.contains(e.target)||
!popper||
popper.contains(e.target))return;
this.showPopper=false;
},
这里判断this.$el是否包含click的target，从而是否触发this.showPopper=false，当菜单栏阻止事件冒泡后document不能监听到click事件，才会无法进行外部点击隐藏的判断逻辑。
延伸v-clickoutside
element的select组件中用到了v-clickoutside自定义指令，作用和popover的handleDocumentClick差不多（倒不如说handleDocumentClick是特殊的clickoutside）
在上面的问题中，我们单独把v-clickoutside抽出来使用确实可以的，这是为什么呢？
//node_modules/element-ui/packages/popover/src/utils/clickoutside.js
!Vue.prototype.$isServer&&on(document,'mousedown',e=>(startClick=e));
!Vue.prototype.$isServer&&on(document,'mouseup',e=>{
nodeList.forEach(node=>node[ctx].documentHandler(e,startClick));
});
答案是v-clickoutside使用鼠标事件判断的，所以click的阻止冒泡不会让clickoutside无效。
总结
解决bug的过程中需要做到不产生额外的bug，并且深入分析问题的原因有助于能力的提高。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。