问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html中Ctrl+滚轮时想禁用放大和缩小事件，怎样禁用？

头像
wgf4242
    146339105

    试了下resize没好使啊。

    <!DOCTYPE html>
<html>
<head>
    <title>Disable Zoom</title>
    <style>
        .a {
          width: 300px;
          height: 300px;
          background: #f00;
        }
    </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>
    htmljavascript
    阅读 1.6k
    avatarAI BotBETA

    要禁用 HTML 中的放大和缩小事件，你可以使用 JavaScript 来捕获 wheel 事件并阻止其默认行为。以下是你可以尝试的示例代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Disable Zoom</title>
    <style>
        .a {
          width: 300px;
          height: 300px;
          background: #f00;
        }
    </style>
</head>
<body>
  <div class="a"></div>

  <script>
    var prevent = function(e) {
      e.preventDefault();
    };

    var elements = document.getElementsByClassName('a');
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('wheel', prevent);
    }
  </script>
</body>
</html>

    在上面的代码中，我们首先定义了一个名为 prevent 的函数，它接收一个事件对象并调用 preventDefault 方法来阻止事件的默认行为。然后，我们通过 getElementsByClassName 方法获取到类名为 a 的所有元素，并使用循环为每个元素添加了 wheel 事件的监听器。当触发滚轮事件时，prevent 函数将被调用，从而阻止了放大和缩小事件的默认行为。

    请注意，这种方法只适用于浏览器中的滚轮事件，而不会影响操作系统级别的缩放功能。此外，这种方法可能会影响到其他依赖于滚轮事件的行为，因此需要谨慎使用。

    1 个回答
    得票最新
    头像
    寸寸青丝愁华年
      731114
      ✓ 已被采纳

      很容易找到
      1.pc端，原生

          document.addEventListener('mousewheel', function (e) {
      e = e || window.event;
      if ((e.wheelDelta && event.ctrlKey) || e.detail) {
        event.preventDefault();
      }
    }, { capture: false, passive: false});
    document.addEventListener('keydown', function (event) {
      if ((event.ctrlKey === true || event.metaKey === true)
        && (event.keyCode === 61 || event.keyCode === 107
          || event.keyCode === 173 || event.keyCode === 109
          || event.keyCode === 187 || event.keyCode === 189)) {
        event.preventDefault();
      }
    }, false);

      2.vue 页面

        methods: {
    keepRatio () {
      var ratio = 0;  // 定义一个缩放比例
      var screen = window.screen;  // 获取窗口对象
      var ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;  // 像素大小的比例
      }
      else if (ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      }
      else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;  // 外部比例/内部比例：缩放比例
      }
      if (ratio) {ratio = Math.round(ratio * 100)}
      this.ratio = (ratio / 100).toFixed(2);
      document.body.style.zoom = 1 / this.ratio;  // 窗口视图除以缩放比例：即缩放还原
    }
  }
  mounted () {
    this.keepRatio()
    window.addEventListener('resize', () => {//监听窗口缩放
     this.keepRatio()
    });
  }
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题