honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): handle clicks deep within anchor tags

Browse Source
This commit is contained in:
Ward Bell 2017-04-18 12:13:13 -07:00 committed by Pete Bacon Darwin
parent 745731e1a3
commit f90258162a
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
aio/src/app/app.component.spec.ts
View File

@ -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');

12
aio/src/app/app.component.ts
View File

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