JavaScript自定义鼠标右键菜单栏

创建JavaScript自定义鼠标右键菜单栏的步骤如下：

第一步：创建一个菜单栏对象

创建一个菜单栏对象，用来存储菜单项和对应的点击事件，例如：

const contextMenu = {
    "items": [{
            "title": "复制",
            "action": function () {
                alert("执行复制操作");
            }
        },
        {
            "title": "粘贴",
            "action": function () {
                alert("执行粘贴操作");
            }
        }
    ]
};

第二步：阻止默认右键菜单

使用event.preventDefault()方法阻止默认的右键菜单，将自定义菜单绑定到右键事件上，例如：

document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    displayContextMenu(event);
});

第三步：显示菜单

在右键事件被触发后，根据鼠标位置设置菜单的位置，再将菜单显示出来，例如：

function displayContextMenu(event) {
    const menuElement = document.createElement("ul");
    menuElement.classList.add("context-menu");

    //根据鼠标位置设置菜单的位置
    menuElement.style.left = event.pageX + 'px';
    menuElement.style.top = event.pageY + 'px';

    //循环创建菜单项并添加到菜单中
    for (let i = 0; i < contextMenu.items.length; i++) {
        const menuItem = document.createElement("li");
        menuItem.innerHTML = contextMenu.items[i].title;

        //给每个菜单项添加点击事件
        menuItem.addEventListener("click", contextMenu.items[i].action);

        menuElement.appendChild(menuItem);
    }

    //添加到DOM树中，显示菜单
    document.body.appendChild(menuElement);
}

示例一

演示如何创建只包含一个“打印”菜单项的右键菜单

const contextMenu = {
    "items": [{
        "title": "打印",
        "action": function () {
            window.print();
        }
    }]
};

document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    displayContextMenu(event);
});

function displayContextMenu(event) {
    const menuElement = document.createElement("ul");
    menuElement.classList.add("context-menu");

    menuElement.style.left = event.pageX + 'px';
    menuElement.style.top = event.pageY + 'px';

    const menuItem = document.createElement("li");
    menuItem.innerHTML = contextMenu.items[0].title;

    menuItem.addEventListener("click", contextMenu.items[0].action);

    menuElement.appendChild(menuItem);

    document.body.appendChild(menuElement);
}

示例二

演示如何创建包含多个菜单项的右键菜单

const contextMenu = {
    "items": [{
            "title": "复制",
            "action": function () {
                document.execCommand("Copy");
            }
        },
        {
            "title": "粘贴",
            "action": function () {
                document.execCommand("Paste");
            }
        },
        {
            "title": "保存图片",
            "action": function () {
                alert("执行保存图片操作");
            }
        }
    ]
};

document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    displayContextMenu(event);
});

function displayContextMenu(event) {
    const menuElement = document.createElement("ul");
    menuElement.classList.add("context-menu");

    menuElement.style.left = event.pageX + 'px';
    menuElement.style.top = event.pageY + 'px';

    for (let i = 0; i < contextMenu.items.length; i++) {
        const menuItem = document.createElement("li");
        menuItem.innerHTML = contextMenu.items[i].title;

        menuItem.addEventListener("click", contextMenu.items[i].action);

        menuElement.appendChild(menuItem);
    }

    document.body.appendChild(menuElement);
}

此外，还可以通过CSS样式调整菜单的样式和布局。