【问题标题】:How can I prevent full page zoom on mousewheel event in Javascript?如何防止 Javascript 中鼠标滚轮事件的整页缩放?
【发布时间】:2019-06-05 17:18:37
【问题描述】:

我希望能够使用触控板和wheel 事件来更新 DOM 元素的比例。它可以像预期的那样工作,但是在几个浏览器上它也可以执行整页缩放。

我想保持我的比例更新,但我想阻止整页缩放。

我已经读到在轮子事件中添加e.preventDefault 可以防止这种情况发生。我有它,但它似乎不起作用。

这是我的密码笔:https://codepen.io/ChucKN0risK/full/JqwrVe

【问题讨论】:

  • 你看过这篇文章吗:medium.com/@auchenberg/…
  • 是的,我做了,我什至测试了提供的演示。然而,缩放也会触发整页缩放。文章 cmets 建议使用e.preventDefault(); 不起作用。
  • 感谢@Mteuahasan 的回答,我更新了 OP 提供的代码,以防止整页缩放:codepen.io/ChucKN0risK/pen/YbbjNL

标签: javascript zooming mousewheel trackpad


【解决方案1】:

在文档级别(window.document、window.document.body 或 window)绑定的事件被视为被动且无法阻止。您应该使用{ passive: false } 作为addEventListener 函数的第三个参数来指定事件不是被动的。请参阅this link 了解更多信息。

在你的情况下:

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (e.ctrlKey) {
        var s = Math.exp(-e.deltaY / 100);
        scale *= s;
    } else {
        var direction = 1; //natural.checked ? -1 : 1;
        tx += e.deltaX * direction;
        ty += e.deltaY * direction;
    }
    var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
    box.style.webkitTransform = transform;
    box.style.transform = transform;
}, {
    passive: false // Add this
});

此外,由于使用 iframe,它无法在 codepen 上运行,因为事件绑定在 iframe 上而不是 codepen 页面本身上。

【讨论】:

  • 我还要补充一点,e.stopPropagation() 不需要防止整页缩放;)
【解决方案2】:
e.preventDefault();  e.stopPropagation();

尝试使用这两种方法

【讨论】:

  • 你需要同时使用两个
猜你喜欢
  • 2012-02-14
  • 2022-11-12
  • 1970-01-01
  • 2013-11-30
  • 2020-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多