improve click handling on touch devices by adding the touchend listen…

…er to buttons
bitmovin · Jan 16, 2025 · c5b5d51 · c5b5d51
1 parent ad91c9c
commit c5b5d51
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/ts/components/buttons/Button.ts b/src/ts/components/buttons/Button.ts
@@ -71,7 +71,8 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }).html(i18n.performLocalization(this.config.text)));
 
     // Listen for the click event on the button element and trigger the corresponding event on the button component
-    buttonElement.on('click', (e) => {
+    buttonElement.on('click touchend', (e) => {
+      e.preventDefault();
       e.stopPropagation();
       this.onClickEvent();
     });

diff --git a/src/ts/components/settings/DynamicSettingsPanelItem.ts b/src/ts/components/settings/DynamicSettingsPanelItem.ts
@@ -102,7 +102,8 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
     const handleItemClick = () => {
       this.displayItemsSubPage();
     };
-    this.getDomElement().on('click', (e) => {
+    this.getDomElement().on('click touchend', (e) => {
+      e.preventDefault();
       e.stopPropagation();
       handleItemClick();
     });

diff --git a/src/ts/components/settings/SettingsPanelSelectOption.ts b/src/ts/components/settings/SettingsPanelSelectOption.ts
@@ -57,7 +57,11 @@ export class SettingsPanelSelectOption extends SettingsPanelItem<SettingsPanelSe
     const handleItemClick = () => {
       this.settingComponent.selectItem(this.settingsValue);
     };
-    this.getDomElement().on('click', () => handleItemClick());
+    this.getDomElement().on('click touchend', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handleItemClick();
+    });
 
     // Initial state
     handleSelectedOptionChanged();