Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

130
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda