targetElement.closest

汤姆丁1111

已于 2023-09-11 15:33:31 修改

阅读量138

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-09 16:43:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53841730/article/details/132191167

版权

文章介绍了如何在Vue组件中使用`onMounted`钩子在页面加载时添加document点击事件监听，以及定义一个事件处理函数`closeIdentity`，该函数通过判断点击元素是否在特定元素`.identity-all`内来控制`isExpanded`状态的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 在组件挂载时，给 document 添加点击事件监听
onMounted(() => {
  document.addEventListener('click', closeIdentity)
})

// 点击事件处理函数，用于改变 isExpanded 的值为 false
const closeIdentity = (event: any) => {
  // 获取点击的元素
  const targetElement = event.target
  // 判断点击的元素是否位于 identity-all 元素之内
  if (!(targetElement.closest('.identity-all'))) {
    isExpanded.value = false
  }
}


// 岗位切换是否展开
const isExpanded = ref(false)