我希望能够使用触控板和 wheel
事件来更新 DOM 元素的比例。它的工作方式与预期一致,但在多个浏览器上它还执行全页缩放。
我想保持比例更新,但我想防止整页缩放。
我读到在wheel事件中添加e.preventDefault
可以防止这种情况发生。我已经有了,但似乎不起作用。
最佳答案
在文档级别(window.document、window.document.body 或 window)绑定(bind)的事件被视为被动事件,无法阻止。您应该使用 { 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 上工作,因为事件绑定(bind)在 iframe 上,而不是绑定(bind)在 codepen 页面本身上。
关于javascript - 如何防止 JavaScript 中鼠标滚轮事件的全页缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56465207/