关于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