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

苏南大叔:electron 如何禁用页面缩放事件?如何禁用双指缩放事件? - electron-zoom2
electron 如何禁用页面缩放事件?如何禁用双指缩放事件?(图1-1)

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

本文测试环境:mac,electron@3.0.5

前言

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

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

electron官方的参数列表:

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

本模块要禁用的事件包括:mac的双指缩放事件,winctrl+滚轮缩放事件。代码如下:

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

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

newsn.net:这里是【评论】可见内容
这里有个小插曲啊,就是加号的键盘事件,实际上检测出来的是等号,而减号的键盘事件,检测出来的是仍然是减号。也就是说,这里,代码方面和人们的认知上,可能出现了偏差。

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

特别说明

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

相关文章

下面的链接中,有另外一个类似效果的新方案,大家可以查看了解一下:

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: