Onbeforeunload no funciona hasta que se hace clic con el mouse una vez en el cuerpo

Después de un largo día de tratar de encontrar una solución a este problema, sigo teniendo el mismo problema.

Básicamente, tengo un sitio, si el usuario hace clic en el botón "actualizar navegador", quiero que aparezca un cuadro de alerta "¿estás seguro?" Con las opciones "recargar" y "no volver a cargar" (Básicamente, lo que devuelve el navegador).

Sorprendentemente, funciona bien en IE. Pero en Chrome o Firefox, la actualización ocurre normalmente sin una ventana emergente.

La ventana emergente solo aparece si hago clic en el cuerpo en algún lugar y luego hago clic en el botón "actualizar navegador".

Ya tengo las siguientes y otras muchas alternativas similares:

window.onbeforeunload = function (e) {
    e = e || window.event;

   // For IE and Firefox prior to version 4
   if (e) {
       e.returnValue = 'Any string';
   }

  // For Safari
  return 'Any string';
};

Traté de simular un evento de clic en la carga de la página con los eventos 'trigger (' click ')', '.click ()'.

Pero, todavía no funciona hasta que hago clic en el cuerpo yo mismo (físicamente).

He creado un bolígrafo corto, que replica el problema que estoy enfrentando.

https://codepen.io/kanchanrai/pen/LQEZYV

Cualquier ayuda sería muy apreciada. Gracias por adelantado.

Respuestas a la pregunta(1)

Su respuesta a la pregunta