文档章节

关于js禁止浏览器缩放

o
 osc_gu9d45li
发布于 2019/04/18 17:34
字数 343
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

前段时间由于工作需要,需要实现禁止使用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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

【软件工具篇02】使用Anki克服遗忘曲线

使用Anki克服遗忘曲线 艾宾浩斯遗忘曲线 百度百科:遗忘曲线由德国心理学家艾宾浩斯研究发现,描述了人类大脑对新事物遗忘的规律。人体大脑对新事物遗忘的循序渐进的直观描述,人们可以从遗...

osc_wobxrheh
19分钟前
0
0
面向对象的理解

面向对象的三大特性 封装 继承 多态 面向对象的七大原则 单一职责原则:每一个类应该专注于做一件事情。即高内聚,低耦合。类的功能要单一,体积不要过于庞大。 开闭原则:一个对象对扩展开发...

osc_2wq8ft8d
21分钟前
11
0
Laravel Redis分布式锁实现源码分析

首先是锁的抽象类,定义了继承的类必须实现加锁、释放锁、返回锁拥有者的方法。 namespace Illuminate\Cache;abstract class Lock implements LockContract{ use InteractsWithTime;...

osc_2jegjdnw
22分钟前
0
0
【HDFS篇03】HDFS客户端操作 --- 开发环境准备

存储越困难,提取越容易 HDFS客户端操作---开发环境准备 步骤一:编译对应HadoopJar包,配置Hadoop变量 步骤二:创建Maven工程,导入pom依赖 <dependencies><dependency><groupId>ju...

osc_ds5ni1ur
24分钟前
7
0
老板,来瓶辣椒酱

最近网剧《隐秘的角落》非常的火爆,结局反转让人难以预料,但前两天发生了一场堪比史诗级大片的纠纷,纠纷的结局反转让人大跌眼镜,估计是神编剧都写不出来那样的剧本...而引发这场纠纷最核...

osc_1loi8uc4
25分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部