我希望能够使用触控板和wheel
事件来更新 DOM 元素的比例。它像预期的那样工作,但是在几个浏览器上它也执行整页缩放。
我想保持我的比例更新,但我想防止整页缩放。
我已经读过添加e.preventDefault
轮事件会阻止这种情况。我有它,但它似乎不起作用。
这是我的代码笔: https ://codepen.io/ChucKN0risK/full/JqwrVe
我希望能够使用触控板和wheel
事件来更新 DOM 元素的比例。它像预期的那样工作,但是在几个浏览器上它也执行整页缩放。
我想保持我的比例更新,但我想防止整页缩放。
我已经读过添加e.preventDefault
轮事件会阻止这种情况。我有它,但它似乎不起作用。
这是我的代码笔: https ://codepen.io/ChucKN0risK/full/JqwrVe
在文档级别(window.document、window.document.body 或 window)绑定的事件被视为被动且无法阻止。{ passive: false }
您应该使用函数的第三个参数指定事件不是被动的addEventListener
。有关更多信息,请参阅此链接。
在你的情况下:
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.preventDefault(); e.stopPropagation();
尝试使用这两个