display: none元素会被document.getElementsByClassName识别到吗

橡皮擦1992024-01-22 16:34

今天登陆项目，发现点击取消按钮则，提示重新登录的提示框讲不会再出现。看对应的代码，发现此处的判断语句是出现该问题的根源。

场景图：

代码：

原因：这是elementui里面的## MessageBox 弹框组件，当点击取消后，该组件会增加一个display：none 的属性，从而使该元素从页面消失了。使用

js 复制代码

document.getElementsByClassName('li-message-box__wrapper').length === 0

来做判断条件，想法是通过判断DOM结构中是否有弹窗这个组件。问题就是出现在这里，display：none的元素，仍然会在DOM结构中，只是不在文档流中。文档流是针对css的，和DOM结构是两个东西，不要弄混了。所以document.getElementsByClassName仍然能识别到。这个判断语句是不对的。

本行代码目的是想实现反正弹窗多次重复弹出。解决方法，通过一个变量，初始化为0，当出现一个重复登录时置为1，操作完置为0

js 复制代码

let messageBoxFlag = 0 // 默认未打开， MessageBox变量控制提示弹窗只弹出一次
service.interceptors.response.use(
  response => {
    console.log(response,'response---');
    let res = response.data
    if (res.code !== 200) {
      if (res.code === 22001031 || res.code === 4104) {

        if (window.location.pathname !== 'login') {
          if (messageBoxFlag === 0) {
            messageBoxFlag = 1 // 修改标记，打开 MessageBox
            MessageBox.confirm('登录失效，请重新登录', '确定登出', {
                confirmButtonText: '重新登录',
                customClass: "delete_style",
                closeOnClickModal: false
            }).then(() => {
                messageBoxFlag = 0  // 修改标记
                store.commit('LOGOUT')
                router.push('/login')
            }).catch(() =>{
                messageBoxFlag = 0  // 修改标记
            })
          }
        } else {
          store.commit('LOGOUT')
          router.push('/login')
        }
      }
    }
    // 
    return response.data
  },
  err => {
    Message.error('请求错误')
    loadingInstance && loadingInstance.close()
  }
)