Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
Why do all click events outside of a few specific areas immediately jump to targetting the ion-app tag?

I am trying to set up some code to close an <ion-menu> when I click outside of it, however, when I click anywhere except the <ion-title>, the click event targets the <ion-app> tag. Here is my code:

<ion-menu type="overlay" side="end" menuId="first" contentId="main" (outsideClick)="clicked_outside_menu($event)">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item 1</ion-item>
      <ion-item>Menu Item 2</ion-item>
      <ion-item>Menu Item 3</ion-item>
      <ion-item>Menu Item 4</ion-item>
      <ion-item>Menu Item 5</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

The (outsideClick) directive is written as follows:

@HostListener('document:mousedown', ['$event'])
onClick(e: MouseEvent): void {
    console.log(this.elementRef);
    console.log(this.elementRef.nativeElement);
    console.log(e.target);
    console.log(this.elementRef.nativeElement.contains(e.target));

    if (!this.elementRef.nativeElement.contains(e.target)) {
        this.outsideClick.emit(e);
    }
}

(The console.log calls are how I have determined that the event is targeting the <ion-app> tag.)

The only element I can click on where the click event doesn't target the <ion-app> is the title text (specifically the text, not anywhere else on the <ion-toolbar>) at the top of this menu:

Image of the <ion-title> being described, labeled as "Start Menu" with a blue background for the toolbar.

However, when the menu is not open, clicks target the HTML elements that I would expect them to, such as other text on the screen, the toolbar as part of the main page, and other elements that also show up in the menu.

It seems that if I add a button to the menu, I cannot click on it, and attempting to click on it causes the click to again target the <ion-app> at the root of the app. It seems very weird that the <ion-title> has a clickable area, but not the buttons which are intended to be clicked on. Maybe they are being blocked by the <ion-app> when the menu is opened for some reason?

Any idea why this is happening? It would be very nice to know how to fix it.

about 4 years ago · Santiago Trujillo
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda