fix(aio): handle clicks deep within anchor tags

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 = '<a href="some/local/url">click me</a>';
+      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 = '<a href="some/local/url"><div><img></div></a>';
+      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 = '<div><p><div><img></div></p></div>';
+      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');

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;
   }