JavaScript 实现自定义右键菜单

在JavaScript中,自定义鼠标右键菜单通常涉及以下几个步骤:

  1. 阻止默认的右键菜单显示
  2. 监听鼠标右键点击事件
  3. 创建自定义的右键菜单界面、在右键点击事件触发时显示自定义菜单
  4. 为自定义菜单添加功能逻辑

以下是代码示例:

js 复制代码
const menus = [
    {
        label: '自定义菜单',
        onClick() {
            console.log('自定义菜单');
        },
    },
    {
        label: '自定义返回',
        onClick() {
            console.log('自定义返回');
        },
    },
    {
        label: '自定义刷新',
        onClick() {
            console.log('自定义刷新');
        },
    },
];

const ContextMenu = (() => {
    let instance;

    const ContextMenu = function ({ menus = [] }) {
        if (instance) {
            return instance;
        }

        this.menus = menus;

        return instance = this;
    };

    const wrapStyle = `
        position: fixed;
        padding: 12px;
        border-radius: 2px;
        box-sizing: border-box;
        box-shadow: 4px 4px 4px 4px #ececec;
        z-index: 999;
    `;
    const itemStyle = `
        line-height: 24px;
        font-size: 10px;
        color: #303133;
        cursor: default;
    `;

    ContextMenu.prototype.create = function () {
        if (this.menuWrap) {
            return this.menuWrap;
        }

        this.menuWrap = document.createElement('div');
        this.menuWrap.style.cssText = wrapStyle;

        for (let menu of this.menus) {
            const item = document.createElement('div');
            item.style.cssText = itemStyle;
            item.textContent = menu.label;
            item.onclick = menu.onClick;

            this.menuWrap.appendChild(item);
        }

        document.body.appendChild(this.menuWrap);

        return this.menuWrap;
    }

    ContextMenu.prototype.remove = function () {
        if (this.menuWrap) {
            document.body.removeChild(this.menuWrap);
            this.menuWrap = null;
        }
    };

    return ContextMenu;
})();

const contextMenu = new ContextMenu({ menus });

document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    createMenu(e);
});

document.addEventListener('click', removeMenu);

function createMenu(e) {
    const menu = contextMenu.create();
    menu.style.top = `${e.clientY}px`;
    menu.style.left = `${e.clientX}px`;
}

function removeMenu(e) {
    contextMenu.remove();
}
相关推荐
伍哥的传说3 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao4 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus5 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus5 小时前
Webpack中微内核&插件化思想的应用
前端·webpack