Allow synthetic click events.

src/action-handler-directive.ts

@@ -25,7 +25,7 @@ declare global {
 }
 
 class ActionHandler extends HTMLElement implements ActionHandler {
-  public holdTime = 400;
+  public holdTime = 500;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public ripple: any;
@@ -66,9 +66,11 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       document.addEventListener(
         ev,
         () => {
-          clearTimeout(this.timer);
+          if (this.timer) {
-          this.stopAnimation();
+            this.stopAnimation();
-          this.timer = undefined;
+            clearTimeout(this.timer);
+            this.timer = undefined;
+          }
         },
         { passive: true },
       );
@@ -95,7 +97,6 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
 
     const start = (ev: Event): void => {
-      this.held = false;
       let x;
       let y;
       if ((ev as TouchEvent).touches) {
@@ -106,22 +107,29 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         y = (ev as MouseEvent).pageY;
       }
 
-      this.timer = window.setTimeout(() => {
+      if (options.hasHold) {
-        this.startAnimation(x, y);
+        this.held = false;
-        this.held = true;
+        this.timer = window.setTimeout(() => {
-      }, this.holdTime);
+          this.startAnimation(x, y);
+          this.held = true;
+        }, this.holdTime);
+      }
     };
 
     const end = (ev: Event): void => {
-      // Prevent mouse event if touch event
+      if (['touchend', 'touchcancel'].includes(ev.type) 
-      ev.preventDefault();
+          // This action handler by default relies on synthetic click events for
-      if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
+          // touch devices, in order to ensure that embedded cards (e.g. WebRTC)
+          // can use stock click handlers. The exception is for hold events.
+          && !(options.hasHold && this.held)) {
         return;
       }
-      clearTimeout(this.timer);
+      if (options.hasHold) {
-      this.stopAnimation();
+        clearTimeout(this.timer);
-      this.timer = undefined;
+        this.stopAnimation();
-      if (this.held) {
+        this.timer = undefined;
+      }
+      if (options.hasHold && this.held) {
         fireEvent(element, 'action', { action: 'hold' });
       } else if (options.hasDoubleClick) {
         if (