ElectronJS 中的点击窗口

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

在复杂的桌面应用程序中，可能会发生这样的情况，其中开发人员可能不得不冻结当前窗口或当前窗口中向用户显示的区域。在这种情况下，窗口将变为静态，用户将无法在窗口上执行任何窗口操作，例如关闭、最小化、最大化等，它将在屏幕上保持打开状态。这意味着窗口或窗口区域对可能发生在其上的任何鼠标事件都无动于衷。这种行为对于使用 HTML、CSS 和 JavaScript 禁用按钮单击似乎很熟悉，但这里的关键区别在于窗口或窗口区域对所有鼠标事件（包括鼠标在该区域上移动）变得无响应。这样的窗口称为Click-Through Window 。 Electron 为我们提供了一种方法，通过该方法我们可以使用BrowserWindow对象的 Instance 方法创建或使现有窗口成为 Click-Through 窗口。本教程将演示如何在 Electron 中创建点击窗口。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

• 项目结构：

示例：按照如何在 ElectronJS 中在页面上查找文本中给出的步骤进行操作？设置基本的电子应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。此外，执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。
包.json：

{
  "name": "electron-clickthrough",
  "version": "1.0.0",
  "description": "Click-Through Window in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

输出：

Electron 中的 Click-Through 窗口： BrowserWindow实例是Main Process 的一部分。为了在Renderer Process 中导入和使用BrowserWindow ，我们将使用 Electron远程模块。如上所述，单击通过窗口会忽略发生在其上的所有鼠标事件。为了退出 Click-Through 窗口，我们需要终止BrowserWindow实例或关闭任务。

• index.html ：在该文件中添加以下代码段。

html

Click-Through Window in Electron
  
      Disable Mouse Events on Current Window
  
  
  
      Forwarding Mouse Events
  
   

• index.js ：在当前窗口上禁用鼠标事件和转发鼠标事件按钮还没有任何与它们相关的功能。要更改此设置，请在index.js文件中添加以下代码

javascript

const electron = require('electron')
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
  
const win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
  
var disable = document.getElementById('disable')
disable.addEventListener('click', (event) => {
    win.setIgnoreMouseEvents(true);
});
  
var forward = document.getElementById('forward');
forward.addEventListener('mouseenter', () => {
    console.log('Mouse Entered the Region...Disabling Click')
    win.setIgnoreMouseEvents(true, { forward: true });
});
  
forward.addEventListener('mouseleave', () => {
    console.log('Mouse Left the Region...Event Emitted')
    win.setIgnoreMouseEvents(false);
});

说明：为了在 Electron 中创建一个简单的 Click-Through 窗口，我们使用BrowserWindow对象的 win.setIgnoreMouseEvents(ignore, options)实例方法。在 BrowserWindow对象上调用此 Instance 方法会使窗口忽略所有鼠标EventEmitters 。此方法没有返回类型。在此窗口中发生的所有鼠标事件现在都将传递给位于此窗口下方的窗口或内容，但如果此 Click-Through 窗口具有焦点，它仍将接收发生在其上的键盘事件。在我们查看传递给此 Instance 方法的参数之前，单击通过窗口有一个附加功能，该功能仅在 Windows 操作系统中受支持。
如上所述，单击通过窗口不会注意到所有鼠标事件，包括鼠标在该窗口或该窗口区域上的移动。在Windows操作系统中，我们可以通过一个额外的选项：对象参数在此实例方法，其可以被用来转发鼠标消息到该网页，因此，允许在BrowserWindow实例要发出的鼠标移动事件，例如鼠标离开和的mouseenter。这个概念被称为转发，它在我们只想让窗口的一部分点击而不是整个BrowserWindow实例的情况下变得有用。这有助于开发人员对窗口或窗口区域进行更精细的控制。在本教程中，我们已将转发应用于转发鼠标事件按钮。因此，鼠标移动事件将适用于此按钮，但按钮本身仍不会响应 mouseClick。简单来说，这会使网页在 HTML 按钮上方点击通过，但在其外部恢复正常。请参阅输出以获得更好的理解。单击Disable Mouse Events on Current Window按钮后，当前BrowserWindow实例变为 Click-Through 窗口。
BrowserWindow对象的win.setIgnoreMouseEvents(ignore, options)实例方法接受以下参数。

• ignore: Boolean此参数使窗口成为点击窗口。
• 选项：对象（可选）此参数仅在 Windows 中受支持。该参数是一个可选参数，负责如上所述的转发。它接受以下参数。
  • forward: Boolean (可选)此参数设置为true ，将鼠标移动消息转发到 Chromium，启用鼠标移动相关事件，例如mouseenter和mouseleave被发射。该参数只能在ignore参数设置为true 时使用。如果ignore参数为false ，则无论此值如何，转发始终处于禁用状态。

要在Renderer Process 中获取当前BrowserWindow实例，我们可以使用 BrowserWindow对象提供的一些静态方法。

• BrowserWindow.getAllWindows()：此方法返回活动/打开的 BrowserWindow 实例的数组。在这个应用程序中，我们只有一个活动的BrowserWindow实例，它可以直接从 Array 中引用，如代码所示。
• BrowserWindow.getFocusedWindow()：此方法返回在应用程序中聚焦的 BrowserWindow 实例。如果未找到当前 BrowserWindow 实例，则返回null 。在这个应用程序中，我们只有一个活动的BrowserWindow实例，可以使用代码中所示的这种方法直接引用它。

输出：