关于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});//firefoxwindow.addEventListener('DOMMouseScroll', function(event){if (event.ctrlKey === true || event.metaKey) {event.preventDefault();}
},{ passive: false});

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

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

关于js禁止浏览器缩放相关推荐

PC端js禁止浏览器缩放
在网上找了很多资料,多多少少都有一些问题,现在重新整理一下. 1.网上的资料大多都是按照windows的devicePixelRatio来判断是否缩放的,这个判断不是很准确,因为在mac下,默认的de ...
JS禁止浏览器打开控制台或查看源代码
分享知识传递快乐 JS禁止浏览器打开控制台或查看源代码在做支付的时候为了保证提交参数的安全.以及为了保证重定向时地址不被查看和修改,必须要禁用浏览器的控制台或源码查看功能,以保证参数及地址的安全 ...
js禁止浏览器后退按钮
js禁止浏览器后退按钮 1.js //禁止浏览器后退按钮 function BanBack(ele) {//禁止浏览器后退按钮if (window.history && window. ...
vue 禁止显示本网页由、、_【VUE/JS】vue和js禁止浏览器页面后退
1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法和使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ ...
防止html网页被f12抓取,JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码...
前言很多站长为了仿止别人仿制或扒下自己的网页,都会选择使用禁止浏览器右键查看元素或F12审查元素,一旦查看元素浏览器页面就会自动关闭,下面话不多说了,来一起看看详细的介绍吧. 注:该代码不兼容火狐浏 ...
JS禁止浏览器后退键
背景说明: 今天项目测试中,同事发现一个Bug,当键盘敲下后退键(Backspace)后,浏览器自动后退,不符合需求,故建议禁止浏览器后退键. 提出需求: 当键盘敲下后退键(Backspace)后 1 ...
js禁止浏览器后退操作
mounted() {//禁止浏览器的后退操作history.pushState(null, null, document.URL);window.addEventListener('popstate ...
html5禁止浏览器缩放网页大小 (实用）
延伸阅读:meta标签viewport详解 html5默认允许用户缩放页面,如果需要禁止缩放,我们需要将user-scalabel=0设置下,具体代码如下: <meta name="v ...
js禁止浏览器保存用户密码
Step1: 在html中,除了要用的密码框以外,额外添加一个密码框,设置为隐藏 <input type = "password" name="myPassword ...

关于js禁止浏览器缩放

关于js禁止浏览器缩放相关推荐

最新文章

热门文章