web: Disable context menu from touch events
Once a touch event is seen, completely disable the context menu to prevent a long press from triggering the context menu. Fixes #1972.
This commit is contained in:
parent
792519a725
commit
ae9be98821
|
@ -117,6 +117,10 @@ export class RufflePlayer extends HTMLElement {
|
|||
private contextMenuElement: HTMLElement;
|
||||
private hasContextMenu = false;
|
||||
|
||||
// Whether this device is a touch device.
|
||||
// Set to true when a touch event is encountered.
|
||||
private isTouch = false;
|
||||
|
||||
private swfUrl?: string;
|
||||
private instance: Ruffle | null;
|
||||
private options: BaseLoadOptions | null;
|
||||
|
@ -172,6 +176,7 @@ export class RufflePlayer extends HTMLElement {
|
|||
|
||||
this.contextMenuElement = this.shadow.getElementById("context-menu")!;
|
||||
this.addEventListener("contextmenu", this.showContextMenu.bind(this));
|
||||
this.addEventListener("pointerdown", this.pointerDown.bind(this));
|
||||
window.addEventListener("click", this.hideContextMenu.bind(this));
|
||||
|
||||
this.instance = null;
|
||||
|
@ -607,6 +612,14 @@ export class RufflePlayer extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
private pointerDown(event: PointerEvent): void {
|
||||
// Disable context menu when touch support is being used
|
||||
// to avoid a long press triggering the context menu. (#1972)
|
||||
if (event.pointerType === "touch" || event.pointerType === "pen") {
|
||||
this.isTouch = true;
|
||||
}
|
||||
}
|
||||
|
||||
private contextMenuItems(): ContextMenuItem[] {
|
||||
const items = [];
|
||||
if (this.fullscreenEnabled) {
|
||||
|
@ -635,7 +648,7 @@ export class RufflePlayer extends HTMLElement {
|
|||
private showContextMenu(e: MouseEvent): void {
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.hasContextMenu) {
|
||||
if (!this.hasContextMenu || this.isTouch) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue