JS禁止鼠标加键盘实现网页缩放

为了防止客户缩放屏幕大小导致3D模型崩溃,做了个禁止网页缩放的功能,包括 CTRL + 键盘加减号、CTRL + 鼠标滚轮,但是还是可以通过点击浏览器的缩放功能来实现缩放效果,这个不做考虑了~

<script>
    document.addEventListener('DOMContentLoaded', function (event) {
      // chrome 浏览器直接加上下面这个样式就行了,但是ff不识别
      document.body.style.zoom = 'reset';
      document.addEventListener('keydown', function (event) {
        if ((event.ctrlKey === true || event.metaKey === true)
          && (event.which === 61 || event.which === 107
            || event.which === 173 || event.which === 109
            || event.which === 187  || event.which === 189))
        {
          event.preventDefault();
        }
      }, false);
      var scrollFunc = function (event) {
        event = event || window.event;
        // console.log(event);
        if (event.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault();
          }
        }
      };
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, { passive: false });
        document.addEventListener('mousewheel', scrollFunc, { passive: false });
      }
      //滚动滑轮触发scrollFunc方法
    }, false);
  </script>

猜你喜欢

发表评论

最新发布