diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index ff16d977bf..ebeaba3273 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -308,13 +308,35 @@ describe('AppComponent', () => { describe('click intercepting', () => { it('should intercept clicks on anchors and call `location.handleAnchorClick()`', inject([LocationService], (location: LocationService) => { - const anchorElement: HTMLAnchorElement = document.createElement('a'); - anchorElement.href = 'some/local/url'; - fixture.nativeElement.append(anchorElement); + + const el = fixture.nativeElement as Element; + el.innerHTML = 'click me'; + const anchorElement = el.getElementsByTagName('a')[0]; anchorElement.click(); expect(location.handleAnchorClick).toHaveBeenCalledWith(anchorElement, 0, false, false); })); + it('should intercept clicks on elements deep within an anchor tag', + inject([LocationService], (location: LocationService) => { + + const el = fixture.nativeElement as Element; + el.innerHTML = '
'; + const imageElement = el.getElementsByTagName('img')[0]; + const anchorElement = el.getElementsByTagName('a')[0]; + imageElement.click(); + expect(location.handleAnchorClick).toHaveBeenCalledWith(anchorElement, 0, false, false); + })); + + it('should ignore clicks on elements without an anchor ancestor', + inject([LocationService], (location: LocationService) => { + + const el = fixture.nativeElement as Element; + el.innerHTML = '

'; + const imageElement = el.getElementsByTagName('img')[0]; + imageElement.click(); + expect(location.handleAnchorClick).not.toHaveBeenCalled(); + })); + it('should intercept clicks not on the search elements and hide the search results', () => { const searchResults: SearchResultsComponent = fixture.debugElement.query(By.directive(SearchResultsComponent)).componentInstance; spyOn(searchResults, 'hideResults'); diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index ad4ece0801..88db3bf41c 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -133,14 +133,16 @@ export class AppComponent implements OnInit { if (eventTarget.tagName === 'FOOTER' && metaKey && altKey) { this.dtOn = !this.dtOn; + return false; } - // Deal with anchor clicks - if (eventTarget instanceof HTMLImageElement) { - eventTarget = eventTarget.parentElement; // assume image wrapped in Anchor + // Deal with anchor clicks; climb DOM tree until anchor found (or null) + let target = eventTarget; + while (target && !(target instanceof HTMLAnchorElement)) { + target = target.parentElement; } - if (eventTarget instanceof HTMLAnchorElement) { - return this.locationService.handleAnchorClick(eventTarget, button, ctrlKey, metaKey); + if (target) { + return this.locationService.handleAnchorClick(target as HTMLAnchorElement, button, ctrlKey, metaKey); } return true; }