移动端浏览器无法禁止默认行为？右滑会导致返回上一页？CSS、JS试过都不行？那是没写对，看这一篇包的~

辣条辣片辣眼睛

于 2024-07-10 11:14:06 发布

阅读量515

点赞数 14

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/DevilMryCry/article/details/140317391

版权

#前言 正常后台管理系统是使用是电脑的去操作的，而且我们系统页面比较复杂，但是上帝突然说他有时候需要方便点，要用移动端设备去操作，我确实不太理解后台管理系统这么大界面，手机操作是不是挺麻烦的，不过上帝既然发话了，我们就干吧

那么问题就来了，因为我们登录是拖动图形验证登录的，我试过大部分浏览器，发现拖动时，界面会跟着拖动，这样就验证不了。就想着禁止界面拖动，禁止浏览器的默认行为，然后发现主流的浏览器是没问题的，像谷歌 edge 这些，偏偏国产的大部分不行，什么UC 百度 QQ 等等，好又到了令人头疼的兼容问题了

原本我的思路是在打开图形验证窗口时，就禁用浏览器默认行为，禁止滚动、缩放

    closeBox() {
      this.clickShow = false
      this.refresh()
      //关闭验证组件时恢复滚动
      document.body.style.overflow = 'auto'
      document.removeEventListener('touchstart', this.bodyPreventDefault)
    },

    show() {
      if (this.mode === 'pop') {
        this.clickShow = true
        //打开验证组件时禁用
        document.body.style.overflow = 'hidden'
        document.body.addEventListener('touchs