Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

129
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!