Skip to content

Commit

Permalink
Merge pull request #683 from bitmovin/feature/improve-click-handling-…
Browse files Browse the repository at this point in the history
…on-touch-devices

Improve click handling on touch devices
  • Loading branch information
stonko1994 authored Jan 27, 2025
2 parents bb19e56 + d596dbf commit e23920b
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 2 deletions.
8 changes: 7 additions & 1 deletion src/scss/components/settings/_settings-panel-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@
cursor: pointer;
}

&:hover {
@media (hover: hover) {
&:hover {
background-color: transparentize($color-item-hover, .15);
}
}

&:active {
background-color: transparentize($color-item-hover, .15);
}

Expand Down
1 change: 1 addition & 0 deletions src/ts/components/buttons/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {

// Listen for the click event on the button element and trigger the corresponding event on the button component
buttonElement.on('click', (e) => {
e.preventDefault();
e.stopPropagation();
this.onClickEvent();
});
Expand Down
1 change: 1 addition & 0 deletions src/ts/components/settings/DynamicSettingsPanelItem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
this.displayItemsSubPage();
};
this.getDomElement().on('click', (e) => {
e.preventDefault();
e.stopPropagation();
handleItemClick();
});
Expand Down
6 changes: 5 additions & 1 deletion src/ts/components/settings/SettingsPanelSelectOption.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', (e) => {
e.preventDefault();
e.stopPropagation();
handleItemClick();
});

// Initial state
handleSelectedOptionChanged();
Expand Down

0 comments on commit e23920b

Please sign in to comment.