Click-Through Window in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

In a complex desktop application, a situation might occur wherein the developers may have to freeze the current window or a region of the current window which is being shown to the user. In such cases, the window becomes static and the user will not be able to perform any window operations such as close, minimize, maximize, etc on the window and it will remain open on the screen. This means that the window or the region of the window becomes oblivious to any Mouse Events which might occur on it. This behaviour might seem familiar to disabling button clicks using HTML, CSS, and JavaScript but the crucial difference here is that the window or the region of the window becomes unresponsive to all Mouse Events including mouse movements over that region. Such a window is known as a Click-Through Window. Electron provides us with a way by which we can create or make an existing window a Click-Through window using the Instance methods of the BrowserWindow object. This tutorial will demonstrate how to create a Click-Through Window in Electron. 

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

  • Project Structure: 
     

Project Structure

Example: Follow the Steps given in How to Find Text on Page in ElectronJS ? to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to set up the Electron application remain the same. 
package.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"
  }
}

Output:

Click-Through Window in Electron: The BrowserWindow Instance is part of the Main Process. To import and use BrowserWindow in the Renderer Process, we will be using Electron remote module. As mentioned above, a Click-Through window ignores all Mouse Events which occur on it. In order to exit the Click-Through window, we need to terminate the BrowserWindow Instance or close the task. 

  • index.html: Add the following snippet in that file. 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<h3>Click-Through Window in Electron</h3>
  <button id="disable">
      Disable Mouse Events on Current Window
  </button>
  <br><br>
  <button id="forward">
      Forwarding Mouse Events
  </button>
<!-- Adding Individual Renderer Process Script File  -->   
<script src="index.js"></script>

chevron_right


  • index.js: The Disable Mouse Events on Current Window and Forwarding Mouse Events buttons do not have any functionality associated with them yet. To change this, add the following code in the index.js file

javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
});

chevron_right


Explanation: To create a simple Click-Through window in Electron, we use the win.setIgnoreMouseEvents(ignore, options) Instance method of the BrowserWindow object. Calling this Instance method on the BrowserWindow object makes the window oblivious to all mouse EventEmitters. This method does not have a return type. All mouse events which happen in this window will now be passed to the window or the contents which lie below this window, but if this Click-Through window has focus, it will still receive the keyboard events which occur on it. Before we look into the parameters that are passed to this Instance method, there is an additional feature for the Click-Through window which is only supported in the Windows operating system. 
As mentioned above, a Click-Through window is oblivious to all mouse events including mouse movements over that window or that region of the Window. In Windows OS, we can pass an additional options: Object parameter to this Instance method which can be used to Forward mouse messages to the webpage, therefore, allowing mouse Movement Events such as the mouseleave and the mouseenter to be emitted on the BrowserWindow Instance. This concept is known as Forwarding and it becomes useful in a situation where we want to make only a portion of the window Click-Through and not the entire BrowserWindow Instance. This helps the developers have more granular control over the window or regions of the window. In this tutorial, we have applied Forwarding to the Forwarding Mouse Events button. Hence, the mouse movement events will be applicable over this button but the button itself will still be unresponsive to mouseClick. In simpler words, this makes the webpage Click-Through when over the HTML Button but returns to normal outside it. Refer to the Output for a better understanding. On clicking the Disable Mouse Events on Current Window button, the current BrowserWindow Instance becomes a Click-Through window. 
The win.setIgnoreMouseEvents(ignore, options) Instance method of the BrowserWindow object takes in the following parameters. 

  • ignore: Boolean This parameter makes the window a Click-Through Window.
  • options: Object (Optional) This parameter is supported in Windows only. This parameter is an optional parameter and is responsible for Forwarding as discussed above. It takes in the following parameters.
    • forward: Boolean (Optional) This parameter is set to true, forwards mouse move messages to Chromium, enabling mouse movement-related events such as mouseenter and mouseleave to be emitted. This parameter can only be used when the ignore parameter is set to true. If the ignore parameter is false, forwarding is always disabled regardless of this value.

To get the current BrowserWindow Instance in the Renderer Process, we can use some Static Methods provided by the BrowserWindow object.
 

  • BrowserWindow.getAllWindows(): This method returns an Array of active/opened BrowserWindow Instances. In this application, we have only one active BrowserWindow Instance and it can be directly referred from the Array as shown in the code.
  • BrowserWindow.getFocusedWindow(): This method returns the BrowserWindow Instance which is focused in the Application. If no current BrowserWindow Instance is found, it returns null. In this application, we only have one active BrowserWindow Instance and it can be directly referred to using this method as shown in the code. 
     

Output: 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.