Mobile: Click event is fired when Nested MatMenu is hidden

#### What is the expected behavior?
In mobile, clicking anywhere on the parent navigation mat-menu should only execute the sub menu. Then click on the submenu, with a routerLink, to see another page.

#### What is the current behavior?
In mobile, if the sub-menu overlaps the parent mat-menu the routerLink in the sub-menu gets executed, even when the sub-menu is hidden.

#### What are the steps to reproduce?
In a mobile device go to: https://angular-aor8v8.stackblitz.io/
Source: https://stackblitz.com/edit/angular-aor8v8?file=app%2Fnested-menu-example.html
Example: http://recordit.co/JopTv4JWTU

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.1.1
Material 7.1.1
Chrome

#### Is there anything else we should know?
I tried the lazy rendering with matMenuContent and it didn't seem to have any affect.
Also, tested on an iOS device and it works perfectly fine

Start by reproducing the mobile behavior using the linked StackBlitz example, especially app/nested-menu-example.html, and compare it with the expected parent-menu and submenu interactions. Trace the nested mat-menu click and routerLink behavior while the submenu is hidden; done means clicking the parent does not activate the hidden submenu link, while clicking the visible submenu link still navigates.

Written by the indexing model from the issue text.