在 html 中禁用 ctrl+滚轮缩放事件
在 HTML 页面中，当用户按住 Ctrl 键并滚动鼠标滚轮时，浏览器通常会放大或缩小页面。但有时我们需要禁用此行为。本文将介绍如何禁用 Ctrl+滚轮缩放事件。
PC 端原生的方法
使用 JavaScript 代码监听 mousewheel 和 keydown 事件，在其中阻止缩放事件：
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);Vue 页面中的实现
立即学习“前端免费学习笔记（深入）”；
在 Vue 页面中，可以在 mounted 钩子中监听窗口缩放事件，并在回调函数中调整窗口缩放：
mounted () {
this.keepRatio()
window.addEventListener('resize', () =youjiankuohaophpcn {//监听窗口缩放
this.keepRatio()
});
}在 methods 中定义 keepRatio 方法：
methods: {
keepRatio () {
// 获取缩放比例
// ...
// 将缩放比例应用到 body 元素
document.body.style.zoom = 1 / this.ratio;
}
} 
