通过js禁止ctrl+滚轮放缩浏览器页面，禁止用手势放大

最新推荐文章于 2024-09-29 13:35:28 发布

weixin_39945506

最新推荐文章于 2024-09-29 13:35:28 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/weixin_39945506/article/details/109385430

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何通过JavaScript禁用浏览器的Ctrl+‘+’、Ctrl+‘-’、滚轮以及手势缩放功能，以防止页面被意外缩放。提供的代码示例覆盖了键盘事件和鼠标滚轮事件，同时也处理了多点触摸的缩放操作，确保在各种设备上都能有效阻止页面缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

禁止ctrl + ‘+’ 和ctrl + '-'
ctrl + + 放大, ctrl + - 缩小
61
107 +
109 -
173 静音
187 =+
189 -_
代码：
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);
ctrl+滚轮缩放
不加passive: false，还是会执行缩放
document.addEventListener(‘mousewheel’, function (e) {
e = e || window.event;
if ((e.wheelDelta && event.ctrlKey) || e.detail) {
event.preventDefault();
}
}, {passive: false}
);
禁止手势缩放
document.documentElement.addEventListener(‘touchstart’, function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, {passive:false});
// 禁止双击放大
let lastTouchEnd = 0;
document.documentElement.addEventListener(‘touchend’, function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, {passive:false});