fix: click event does not respond when disable the event bubbling (#11)

Co-authored-by: xiaoweii <xiaoweii@amazom.com>

Author: zhu-xiaowei

.github/workflows/test.yml

@@ -19,4 +19,4 @@ jobs:
         uses: codecov/codecov-action@v3
         with:
           name: report
-          files: coverage/clover.xml
+          files: coverage/coverage-final.json

src/tracker/ClickTracker.ts

@@ -18,20 +18,22 @@ import { Event } from '../provider';
 const logger = new Logger('ClickTracker');
 
 export class ClickTracker extends BaseTracker {
+	processedElements = new WeakSet();
+
 	init() {
 		this.trackClick = this.trackClick.bind(this);
-		document.addEventListener('click', this.trackClick);
 		const currentDomain = window.location.host;
 		const domainList = this.context.configuration.domainList;
 		if (!domainList.includes(currentDomain)) {
 			domainList.push(currentDomain);
 		}
+		this.addClickListenerForATag();
 	}
 
 	trackClick(event: MouseEvent) {
 		if (!this.context.configuration.isTrackClickEvents) return;
 		const targetElement = event.target as Element;
-		const element = this.findTagA(targetElement);
+		const element = this.findATag(targetElement);
 		if (element !== null) {
 			const linkUrl = element.getAttribute('href');
 			if (linkUrl === null || linkUrl.length === 0) return;
@@ -60,13 +62,33 @@ export class ClickTracker extends BaseTracker {
 		}
 	}
 
-	findTagA(element: Element, depth = 0): Element {
+	addClickListenerForATag() {
+		const observer = new MutationObserver(mutationsList => {
+			for (const mutation of mutationsList) {
+				if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+					const target = mutation.target;
+					if (target instanceof Element) {
+						const aTags = target.querySelectorAll('a');
+						aTags.forEach(aTag => {
+							if (!this.processedElements.has(aTags)) {
+								aTag.addEventListener('click', this.trackClick);
+								this.processedElements.add(aTag);
+							}
+						});
+					}
+				}
+			}
+		});
+		observer.observe(document.body, { childList: true, subtree: true });
+	}
+
+	findATag(element: Element, depth = 0): Element {
 		if (element && depth < 3) {
 			if (element.tagName === 'A') {
 				return element;
 			} else {
 				depth += 1;
-				return this.findTagA(element.parentElement, depth);
+				return this.findATag(element.parentElement, depth);
 			}
 		}
 		return null;

test/tracker/ClickTracker.test.ts

@@ -65,7 +65,7 @@ describe('ClickTracker test', () => {
 		clickTracker.setUp();
 		window.document.dispatchEvent(new window.Event('click'));
 		expect(recordMethodMock).not.toBeCalled();
-		expect(trackClickMock).toBeCalled();
+		expect(trackClickMock).not.toBeCalled();
 	});
 
 	test('test click a element with current domain', () => {
@@ -89,6 +89,19 @@ describe('ClickTracker test', () => {
 		});
 	});
 
+	test('test disable the configuration for track click event', () => {
+		provider.configuration.isTrackClickEvents = false;
+		const clickEvent = getMockMouseEvent(
+			'A',
+			'https://localhost/collect',
+			'link-class',
+			'link-id'
+		);
+		clickTracker.setUp();
+		clickTracker.trackClick(clickEvent);
+		expect(recordMethodMock).not.toBeCalled();
+	});
+
 	test('test click a element in configured domain', () => {
 		const clickEvent = getMockMouseEvent(
 			'A',
@@ -174,6 +187,28 @@ describe('ClickTracker test', () => {
 		});
 	});
 
+	test('test click a element with out a tag in parent', () => {
+		const clickEvent = getMockMouseEvent('SPAN', '', '', '');
+		const targetElement = document.createElement('SPAN');
+		Object.defineProperty(clickEvent.target, 'parentElement', {
+			writable: true,
+			value: targetElement,
+		});
+		clickTracker.setUp();
+		clickTracker.trackClick(clickEvent);
+		expect(recordMethodMock).not.toBeCalled();
+	});
+
+	test('test add A tag and trigger MutationObserver', async () => {
+		clickTracker.setUp();
+		const div = document.createElement('div');
+		const aTag = document.createElement('A');
+		div.appendChild(aTag);
+		document.body.appendChild(div);
+		await sleep(100);
+		expect(clickTracker.processedElements.has(aTag)).toBeTruthy();
+	});
+
 	function getMockMouseEvent(
 		tagName: string,
 		href: string,
@@ -191,4 +226,8 @@ describe('ClickTracker test', () => {
 		});
 		return event;
 	}
+
+	function sleep(ms: number): Promise<void> {
+		return new Promise(resolve => setTimeout(resolve, ms));
+	}
 });