关于js禁止浏览器缩放

 

前段时间由于工作需要，需要实现禁止使用Ctrl/Command + -/+, 以及Ctrl/Command + 鼠标滚动等方式缩放浏览器：

 1         $(document).keydown(function (event) {
 2           //event.metaKey mac的command键 
 3           //mac下chrome: - 189, + 187 firefox: - 173, + 61, 
 4           //数字键盘: + 107, - 109
 5           if ((event.ctrlKey === true || event.metaKey === true)&& 
 6           (event.which === 189 || event.which === 187 
 7           || event.which === 173 || event.which === 61 
 8           || event.which === 107  || event.which === 109))
 9           {
10             event.preventDefault();
11           }
12         });
13         $(window).bind('mousewheel DOMMouseScroll', function (event) {
14           if (event.ctrlKey === true || event.metaKey) {
15              event.preventDefault();
16           }
17         });

然而最近升级了chrome浏览器到73，再运行项目的时候突然报错：

查看了相关说明，发现chrome73为了减少用户触摸屏幕后更新显示所需的时间，将在文档级目标(窗口)上注册的wheel/mousewheel事件侦听器默认为passive(即：{passive: true})。而这样的设置将忽略此类侦听器内部的preventDefault()调用，从而使chrome下的禁止功能失效。目前先根据官方说明做了修改：

window.addEventListener('mousewheel', function(event){
    if (event.ctrlKey === true || event.metaKey) {
          event.preventDefault();
    }
},{ passive: false});

//firefox
 window.addEventListener('DOMMouseScroll', function(event){
    if (event.ctrlKey === true || event.metaKey) {
           event.preventDefault();
    }
},{ passive: false});

虽然目前firefox的相关更改还在考虑中，但为了防止出现相同问题，还是为ff下的事件显示设置了{passive: true}。

暂时解决了问题，记录一下待日后优化。

相关说明：

https://www.chromestatus.com/features/6662647093133312

https://developers.google.com/web/updates/2017/01/scrolling-intervention

https://github.com/WICG/interventions/issues/64

转载于:https://www.cnblogs.com/xiaobaiou/p/10731062.html