Merge pull request #274 from thc202/capture-clicks

psiinon · web-flow · commit a57d46e14de4 · 2025-11-28T14:58:57.000Z
Use capture phase for clicks
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 - Support for dark mode
 
+### Fixed
+- Record all clicks even when the site stops the events from bubbling.
+
 ## 0.1.6 - 2025-08-04
 
 ### Fixed
diff --git a/CHANGELOG.rec.md b/CHANGELOG.rec.md
@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 - Support for dark mode
 
+### Fixed
+- Record all clicks even when the site stops the events from bubbling.
+
 ## 0.1.6 - 2025-08-04
 
 ### Fixed
diff --git a/source/ContentScript/recorder.ts b/source/ContentScript/recorder.ts
@@ -337,7 +337,10 @@ class Recorder {
 
     element.addEventListener(
       'click',
-      this.handleClick.bind(this, {level, frame, element})
+      this.handleClick.bind(this, {level, frame, element}),
+      {
+        capture: true,
+      }
     );
     element.addEventListener(
       'scroll',
diff --git a/test/ContentScript/integrationTests.test.ts b/test/ContentScript/integrationTests.test.ts
@@ -240,6 +240,25 @@ function integrationTests(
     ]);
   });
 
+  test('Should record click that does not bubble', async () => {
+    // Given / When
+    await driver.toggleRecording();
+    const wd = await driver.getWebDriver();
+    await wd.get(`http://localhost:${_HTTPPORT}/webpages/interactions.html`);
+    await pageLoaded(wd);
+    await wd.findElement(By.id('click-no-bubble')).click();
+    await eventsProcessed();
+    // Then
+    expect(actualData).toEqual([
+      reportZestStatementComment(),
+      reportZestStatementLaunch(
+        'http://localhost:1801/webpages/interactions.html'
+      ),
+      reportZestStatementScrollTo(3, 'click-no-bubble'),
+      reportZestStatementClick(4, 'click-no-bubble'),
+    ]);
+  });
+
   test('Should record click with start URL delay', async () => {
     // Given / When
     await driver.toggleRecording(
diff --git a/test/ContentScript/webpages/interactions.html b/test/ContentScript/webpages/interactions.html
@@ -3,6 +3,7 @@
     </head>
     <body>
         <button id="click">click me</button>
+        <button id="click-no-bubble">click me no bubble</button>
         <input type="text" id="input-1" /> 
         <input type="date" id="input-2" />
         <input type="text" id="input-3-filled" value="Existing text"/> 
@@ -14,5 +15,9 @@
           <option value="audi">Audi</option>
         </select>
         <iframe src="./testFrame.html" name="frame1"></iframe>
+        <script>
+          const elem = document.getElementById("click-no-bubble");
+          elem.addEventListener("click", (e) => e.stopPropagation());
+        </script>
     </body>
 </html>
