在 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', () => {//监听窗口缩放
this.keepRatio()
});
}在 methods 中定义 keepRatio 方法：
methods: {
keepRatio () {
// 获取缩放比例
// ...
// 将缩放比例应用到 body 元素
document.body.style.zoom = 1 / this.ratio;
}
}以上就是如何禁用 HTML 页面中的 Ctrl+滚轮缩放事件？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
882
