Question

我希望能够使用触控板和e.preventDefault事件来更新DOM元素的比例。它的工作原理与预期的一样，但是在一些浏览器上，它也可以执行整页缩放。

我想保持比例尺更新，但要防止整个页面缩放。

我已经读到，在wheel事件中添加{{1}}可以防止这种情况。我有它，但似乎没有用。

这是我的codepen：https://codepen.io/ChucKN0risK/full/JqwrVe

Answer 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上工作。

Answer 2

e.preventDefault();  e.stopPropagation();

尝试同时使用这两种

如何在Javascript中防止对鼠标滚轮事件进行全页缩放？

2 个答案: