企业官网建设流程全解析

环保东莞网站建设技术支持,微博网站开发平台,福州小型网站建设,金融网站建设报价方案提示#xff1a;el-drawer或el-dialog注册全局点击事件无效#xff0c;即抽屉或弹框外点击会触发事件#xff0c;但抽屉和弹框内点击无反应 目前通过方案2#xff1a;使用捕获阶段#xff08;推荐#xff09;解决 文章目录解决方案方案1#xff1a;将事件监听器改为 do…提示el-drawer或el-dialog注册全局点击事件无效即抽屉或弹框外点击会触发事件但抽屉和弹框内点击无反应目前通过方案2使用捕获阶段推荐解决文章目录解决方案方案1将事件监听器改为 document方案2使用捕获阶段推荐方案3检查事件路径方案4针对 el-drawer 的特殊处理方案5使用 Vue 的自定义事件如果 drawer 是子组件调试建议这是因为事件冒泡被阻止了。el-drawer组件内部的事件默认不会冒泡到window这可能是因为el-drawer阻止了事件冒泡事件修饰符.stop事件目标被判断为不在window内el-drawer的层叠上下文导致事件被拦截解决方案方案1将事件监听器改为documentonMounted((){document.addEventListener(click,clearFlag)})onBeforeUnmount((){document.removeEventListener(click,clearFlag)})方案2使用捕获阶段推荐onMounted((){document.addEventListener(click,clearFlag,true)// 第三个参数 true 表示捕获阶段})onBeforeUnmount((){document.removeEventListener(click,clearFlag,true)})方案3检查事件路径如果上面的方法无效可以检查事件是否被阻止constclearFlag(event){console.log(事件触发,event.target)console.log(事件路径,event.composedPath())// 检查是否被阻止console.log(defaultPrevented,event.defaultPrevented)}方案4针对 el-drawer 的特殊处理import{nextTick}fromvueonMounted((){nextTick((){// 获取 drawer 的 DOMconstdrawerdocument.querySelector(.el-drawer)if(drawer){drawer.addEventListener(click,clearFlag)}// 同时监听 document 作为后备document.addEventListener(click,clearFlag)})})onBeforeUnmount((){constdrawerdocument.querySelector(.el-drawer)if(drawer){drawer.removeEventListener(click,clearFlag)}document.removeEventListener(click,clearFlag)})方案5使用 Vue 的自定义事件如果 drawer 是子组件!-- 父组件 -- template ChildDrawer drawer-clickclearFlag / /template !-- 子组件 drawer 内部 -- template el-drawer div click$emit(drawer-click) !-- 内容 -- /div /el-drawer /template调试建议constclearFlag(event){console.log(事件触发,{target:event.target,currentTarget:event.currentTarget,eventPhase:event.eventPhase,// 1: 捕获, 2: 目标, 3: 冒泡bubbles:event.bubbles,// 是否冒泡defaultPrevented:event.defaultPrevented,composed:event.composed,// 是否能跨越 Shadow DOM})}推荐先用方案1或方案2大多数情况下将window改为document并使用捕获阶段就能解决问题。