liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Mike Welsh 2021-04-11 23:00:58 -07:00
parent 792519a725
commit ae9be98821
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/packages/core/src/ruffle-player.ts
View File

@ -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;
}