html5 自定义右键菜单,每天一个小技巧：实现自定义右键菜单（Context Menu）

鼠标右击网页会弹出默认的浏览器菜单，但是很多时候我们需要自定义右键菜单(比如：在线文档编辑器、定制视频播放器等)。今天我们就来快速实现一个自定义右键菜单。

预览：

contextmenu 事件监听

首先，我们需要禁用浏览器弹出默认菜单的行为，通过阻止 contextMenu 事件的默认行为，并同时触发自定义菜单的显示：

document.addEventListener("contextmenu", (e) => {

e.preventDefault();

showMenu(e);

});

构造菜单

1. 实现单例

一个页面中菜单应该只有一个实例，所以我们运用单例模式去创建菜单，典型的单例构造器可以实现为：

const ContextMenu = function (options) {

// 唯一实例

let instance;

// 创建实例方法

function createMenu() {