diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
index cc8af391f5f..890d6af52cb 100644
--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -8,7 +8,8 @@ export const createButtonActiveGesture = (
   el: HTMLElement,
   isButton: (refEl: HTMLElement) => boolean
 ): Gesture => {
-  let touchedButton: HTMLElement | undefined;
+  let currentTouchedButton: HTMLElement | undefined;
+  let initialTouchedButton: HTMLElement | undefined;
 
   const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
     if (typeof (document as any) === 'undefined') { return; }
@@ -18,30 +19,43 @@ export const createButtonActiveGesture = (
       return;
     }
 
-    if (target !== touchedButton) {
+    if (target !== currentTouchedButton) {
       clearActiveButton();
       setActiveButton(target, hapticFeedbackFn);
     }
   };
 
   const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
-    touchedButton = button;
-    const buttonToModify = touchedButton;
+    currentTouchedButton = button;
+
+    if (!initialTouchedButton) {
+      initialTouchedButton = currentTouchedButton;
+    }
+
+    const buttonToModify = currentTouchedButton;
     writeTask(() => buttonToModify.classList.add('ion-activated'));
     hapticFeedbackFn();
   };
 
   const clearActiveButton = (dispatchClick = false) => {
-    if (!touchedButton) { return; }
+    if (!currentTouchedButton) { return; }
 
-    const buttonToModify = touchedButton;
+    const buttonToModify = currentTouchedButton;
     writeTask(() => buttonToModify.classList.remove('ion-activated'));
 
-    if (dispatchClick) {
-      touchedButton.click();
+    /**
+     * Clicking on one button, but releasing on another button
+     * does not dispatch a click event in browsers, so we
+     * need to do it manually here. Some browsers will
+     * dispatch a click if clicking on one button, dragging over
+     * another button, and releasing on the original button. In that
+     * case, we need to make sure we do not cause a double click there.
+     */
+    if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
+      currentTouchedButton.click();
     }
 
-    touchedButton = undefined;
+    currentTouchedButton = undefined;
   };
 
   return createGesture({
@@ -53,6 +67,7 @@ export const createButtonActiveGesture = (
     onEnd: () => {
       clearActiveButton(true);
       hapticSelectionEnd();
+      initialTouchedButton = undefined;
     }
   });
 };