Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is it possible to add an eventListener to a custom title bar in a frameless window?

Added a custom title bar to a frameless window in order to make the window draggable. The title bar shows, but eventListener won’t fire:

main.js:

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      frame: false,
      scrollbar: false,
      webPreferences:{
        nodeIntegration: true,
        contextIsolation: false,
      }
    })
    win.loadFile('index.html')
  }

index.html:

<body>
  <div class="window">
    <div class="window-content">
      <textarea>some content</textarea>
    </div>
  </div>
  <script src="index.js"></script>
</body>

index.js:

let titleBar = document.createElement('div')
titleBar.style.width = "100%"
titleBar.style.height = "32px"
titleBar.style.backgroundColor = "#fff"
titleBar.style.position = "absolute"
titleBar.style.top = titleBar.style.left = 0
titleBar.style.webkitAppRegion = "drag"
titleBar.textContent = 'My App';

document.body.appendChild(titleBar)

// Nothing happens
titleBar.addEventListener("mouseover", () => {
    console.log("hello")
})
Tags:

2

Answers


  1. 0

    You don’t need to use eventListener, you can achieve this use only CSS.

    main.js

    const createWindow = () => {
const win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
  scrollbar: false,
  titleBarStyle: 'hidden',//Add this
  titleBarOverlay: {
   color: '#ecf2f9',
   symbolColor: '#003d99',
   height: 40,
  },//Add this for windows
  webPreferences:{
    nodeIntegration: true,
    contextIsolation: false,
  }
})
win.loadFile('index.html')
}

    index.html

     <body>
<div class="titleBar">
My App
</div>
<div class="window">
  <div class="window-content">
    <textarea>some content</textarea>
  </div>
</div>
<script src="index.js"></script>

    index.css

    .titleBar{
background-color: #ecf2f9;
height: 40px; /* Adjust height as needed */
-webkit-app-region: drag; /*Allow dragging the window */
.
.
.
}
    Login or Signup to reply.
  2. 0

    Yes, it is possible to add an eventListener to a custom title bar in a frameless window.
    The issue you are observing is caused by

    titleBar.style.webkitAppRegion = "drag"

    which interferes with the mechanism of propagating the events and prevents the mouse events to be detected by the listener.

    In other words it seems that in Electron you can’t have both at the same time: the dragging and the firing of the mouse events.

    To see it yourself comment or remove the "drag" line and experience that the mouse event is then working as expected ( don’t forget that the console output is provided after Ctrl+Shift+i in the window of the application and not in the Terminal window running the application ).

    A possible workaround is to have two title bars: one for dragging the window and the other one for responding to mouse events:

    console.log("renderer.js loaded");

document.addEventListener('DOMContentLoaded', () => {
    // Create the draggable title bar at the very top
    let draggableTitleBar = document.createElement('div');
    draggableTitleBar.style.width = "100%";
    draggableTitleBar.style.height = "24px";
    draggableTitleBar.style.backgroundColor = "#e74c3c";
    draggableTitleBar.style.position = "absolute";
    draggableTitleBar.style.top = "0px";
    draggableTitleBar.style.left = "0px";
    draggableTitleBar.style.zIndex = "1000";
    draggableTitleBar.style.webkitAppRegion = "drag";
    draggableTitleBar.textContent = 'Draggable Title Bar';

    // Create the non-draggable title bar below it
    let nonDraggableTitleBar = document.createElement('div');
    nonDraggableTitleBar.style.width = "100%";
    nonDraggableTitleBar.style.height = "40px";
    nonDraggableTitleBar.style.backgroundColor = "#3498db";
    nonDraggableTitleBar.style.position = "absolute";
    nonDraggableTitleBar.style.top = "24px"; // Adjust position as needed
    nonDraggableTitleBar.style.left = "0px";
    nonDraggableTitleBar.style.zIndex = "1000";
    nonDraggableTitleBar.textContent = 'Non-Draggable Title Bar';

    // Add event listeners to the non-draggable title bar
    nonDraggableTitleBar.addEventListener("mouseover", () => {
        console.log("Mouseover event triggered on non-draggable title bar");
    });

    nonDraggableTitleBar.addEventListener("click", () => {
        console.log("Non-draggable title bar clicked");
    });

    // Append both title bars to the document body
    document.body.appendChild(draggableTitleBar);
    document.body.appendChild(nonDraggableTitleBar);

    console.log("Title bars added to the DOM");
});

    Here how it looks like:

    AppWindow with devTools Console

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search