electron 如何禁用页面缩放事件？如何禁用双指缩放事件？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文中，苏南大叔讲述个很现实的electron的小问题，那就是electron会响应一些浏览器事件的问题。虽然，在网页的角度上说，这些事件是无法避免的。但是对于electron来说，这些事件的响应，显然是不妥当的。因为毕竟electron对标的可是原生的客户端，如果客户端去响应一些浏览器事件的话，这个用户体验会变得异常诡异。

比如，本文中讲述的electron页面缩放快捷键事件。那么，为了给electron更好的客户体验，这些快捷键事件，究竟将怎么屏蔽呢？

本文测试环境：mac,electron@3.0.5。

本文后续文章更新：https://newsn.net/say/electron-zoomlimit-2.html

前言

有些读者反馈说，可以使用参数--disable-pinch来解决这个问题，看起来确实相当便利。但是，苏南大叔尝试过之后，觉得可能electron可能还暂时没有支持这个参数，而且官方的参数列表里面，也没有这个参数的相关描述。苏南大叔试了好几个electron版本，都不能通过下面的代码解决这个问题。那么，您也可以试试看。如果可以，欢迎留言告知。谢谢。

var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

electron官方的参数列表:

• https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

禁用滚轮放大事件/双指缩放事件

本模块要禁用的事件包括：mac的双指缩放事件，win的ctrl+滚轮缩放事件。代码如下：

document.addEventListener('mousewheel', (ev) => {
  if(ev.ctrlKey){
    ev.preventDefault();
    return false;
  }
});

这段代码，仔细想想的话，其实也是蛮有意思的：

• 在mac系统上，实际上是个双指缩放事件，而并不是个mousewheel鼠标滚轮事件。而且，在mac系统上，也根本没有按下ctrl，但是从结果上来看，却表明：双指操作的时候，真实地按下了ctrl键。这，是一个很神奇的转换。
• 在win上面，在苏南大叔这边的测试结果上来看，electron本身也没有支持ctrl+滚轮事件。

禁用 ctrl + 加减号事件

经过苏南大叔测试，上述代码中，并没有屏蔽另外的网页缩放快捷键：

• win: ctrl+加号/ctrl+减号/ctrl+0
• mac: command+加号/command+减号/command+0

那么，这些快捷键的屏蔽方式是什么样的呢？

这里有个小插曲啊，就是加号的键盘事件，实际上检测出来的是等号，而减号的键盘事件，检测出来的是仍然是减号。也就是说，这里，代码方面和人们的认知上，可能出现了偏差。

在这段代码中，没有拦截mousewheel事件，而是拦截了keydown事件。因为，在苏南大叔的测试中，只触发了keydown事件，并没有触发mousewheel事件。

特别说明

本文代码在electron3.0.5中测试通过，但是，理论上来说，也可以用于其他普通的网页。并不必须局限在electron环境中，如果用于普通网页的话，请多多注意，各种兼容浏览器的情况。毕竟，electron中存在的是：最好用的chrome内核。

总结

electron在屏蔽原本的网页事件这个方面，还是处理的并不是太好。随便几个快捷键，就导致程序露出其网页的代码实质了。更多苏南大叔的electron相关经验文字，请点击：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。