表单输入框焦点获取与失去事件不同步问题解决方案

表单输入框焦点获取与失去事件不同步问题解决方案

在程序运行中,input输入框的获取焦点事件触发等级是高于失去焦点事件的
所以我们在另一个元素中写获取焦点,在当前元素中有失去焦点则后者的失去焦点事件会被覆盖
这里我们采取的解决方案为

		//失去焦点事件
       loseFocus() {
        /**
         * 这里使用定时器是因为失去焦点方法被在获取焦点前触发
         * 而JS是过程性语言,在程序运行结束后元素都还没获取到焦点
         * 定时器使方法延后执行 所有元素失去焦点才执行
         * */
        setTimeout(() => {
          let status = true
          //获取所有input元素
          let el = document.querySelectorAll('input')
          for (let i = 0; i < el.length; i++) {
          	//如果元素有选中状态则状态未嫁 则不触发方法
            if (el[i] == document.activeElement) {
              status = false
            }
          }
          if (status) {
          	//方法执行
            document.querySelector('.login-shade').classList.add('blur-inversion')
            document.querySelector('.login-shade').classList.remove('blur')
          }
        }, 100)
      },