IOS微信浏览器内H5页面点击事件失效

在微信浏览器内的H5页面,当触发点击事件时有时会失效,点击没有效果,或者点击事件错位,其实这是因为在小屏幕上,在点击输入框弹出键盘  键盘回缩 后定位没有相应改变


也就是说,其实是input聚焦后页面被顶起,然后失焦后页面回位,但是这里只是视觉上回位了,window其实已经被顶上去一定的距离。你再次点击页面时就已经错位了,视觉上的点击事件触发按钮其实不是真正的按钮位置,所以点击时不会生效,而是在按钮上面一点距离点击它会生效(这要看被软键盘顶起多高了)。


解决办法:监听键盘触发事件,在监听到键盘关闭时将页面位置归零

      keyboardEvents() {
        let myFunction;
        document.body.addEventListener('focusin', () => { // 软键盘弹起事件
          clearTimeout(myFunction)
        })
        document.body.addEventListener('focusout', () => { // 软键盘关闭事件
          clearTimeout(myFunction)
          myFunction = setTimeout(function () {
            window.scrollTo({
              top: 0,
              left: 0,
              behavior: 'smooth'
            }) // =======当键盘收起的时候让页面回到原始位置
          }, 200)
        })
      }


—————————————————————————————————————

亲爱的用户,您好!如果您喜欢这个网站,欢迎赞助我,您们的支持是我的动力。

赞赏款用于服务器、文章等网站的固定支出。欢迎大家支持,谢谢!

51cb4e9a9397260f1f774ee07de0b77.jpg