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

posted @ 2019-04-18 17:34  小白鸥  阅读(...)  评论(...编辑  收藏