HTML中自定义鼠标右键菜单

m0_623171552024-03-04 9:59

今天突然有人跟我提到了HTML中如何自定义鼠标右键菜单，这里大概记录一下吧，方便下次直接复制。免得还去看API文档。

文章目录

HTML中自定义鼠标右键菜单

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标右键菜单示例</title>
    <style>
        .context-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            min-width: 100px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .context-menu-item {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="contextMenu" class="context-menu">
    <div class="context-menu-item" onclick="handleItemClick('复制')">复制</div>
    <div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div>
    <div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div>

<script>
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault(); // 阻止默认右键菜单

        var menu = document.getElementById('contextMenu');
        menu.style.display = 'block';
        menu.style.left = `${e.pageX}px`;
        menu.style.top = `${e.pageY}px`;
    });

    document.addEventListener('click', function () {
        document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单
    });

    function handleItemClick(itemName) {
        console.log(`用户点击了菜单项：${itemName}`);
        // 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作
        switch (itemName) {
            case '复制':
                // 执行复制操作...
                break;
            case '粘贴':
                // 执行粘贴操作...
                break;
            case '剪切':
                // 执行剪切操作...
                break;
        }
        document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单
    }
</script>

</body>
</html>

结果如下所示

在这个例子中，当用户在网页上右键点击时，会显示一个自定义菜单。并在点击菜单项时执行相应的函数。这个就要根据自己具体的实际场景中实现了。

可以稍微改一下鼠标悬浮到右键菜单时的样式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标右键菜单示例</title>
    <style>
        .context-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            min-width: 100px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .context-menu-item {
            padding: 5px 10px;
            cursor: pointer;
        }
        .context-menu-item:hover {
            background-color: #e6f7ff;
        }
    </style>
</head>
<body>

<div id="contextMenu" class="context-menu">
    <div class="context-menu-item" onclick="handleItemClick('复制')">复制</div>
    <div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div>
    <div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div>

<script>
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault(); // 阻止默认右键菜单

        var menu = document.getElementById('contextMenu');
        menu.style.display = 'block';
        menu.style.left = `${e.pageX}px`;
        menu.style.top = `${e.pageY}px`;
    });

    document.addEventListener('click', function () {
        document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单
    });

    function handleItemClick(itemName) {
        console.log(`用户点击了菜单项：${itemName}`);
        // 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作
        switch (itemName) {
            case '复制':
                // 执行复制操作...
                break;
            case '粘贴':
                // 执行粘贴操作...
                break;
            case '剪切':
                // 执行剪切操作...
                break;
        }
        document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单
    }
</script>

</body>
</html>

结果如下所示

只在某个特定的div才可以显示右键菜单

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标右键菜单示例</title>
    <style>
        .context-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            min-width: 100px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .context-menu-item {
            padding: 5px 10px;
            cursor: pointer;
        }
        .context-menu-item:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

<div id="targetDiv" style="width: 300px; height: 300px; background-color: #eee;">
    右键点击我显示自定义菜单
</div>

<div id="contextMenu" class="context-menu">
    <div class="context-menu-item" onclick="handleItemClick('复制')">复制</div>
    <div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div>
    <div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div>

<script>
    const targetDiv = document.getElementById('targetDiv');

    targetDiv.addEventListener('contextmenu', function (e) {
        e.preventDefault(); // 阻止默认右键菜单

        if (e.target === targetDiv) { // 只有当点击的目标是目标div时才显示菜单
            var menu = document.getElementById('contextMenu');
            menu.style.display = 'block';
            menu.style.left = `${e.pageX}px`;
            menu.style.top = `${e.pageY}px`;
        }
    });

    document.addEventListener('click', function () {
        document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单
    });

    function handleItemClick(itemName) {
        console.log(`用户点击了菜单项：${itemName}`);
        // 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作
        switch (itemName) {
            case '复制':
                // 执行复制操作...
                break;
            case '粘贴':
                // 执行粘贴操作...
                break;
            case '剪切':
                // 执行剪切操作...
                break;
        }
        document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单
    }
</script>

</body>
</html>

结果如下所示

在这个例子中，右键菜单只会出现在具有ID为targetDiv的div元素上。当用户在其他位置右键点击时，不会显示自定义菜单。

在多个特定的div中都可以显示右键菜单

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标右键菜单示例</title>
    <style>
        .context-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            min-width: 100px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .context-menu-item {
            padding: 5px 10px;
            cursor: pointer;
        }
        .context-menu-item:hover {
            background-color: #24d0d6;
        }
    </style>
</head>
<body>

<div id="targetDiv1" class="target-divs" style="width: 300px; height: 300px; background-color: #eee;">
    右键点击我显示自定义菜单
</div>

<div id="targetDiv2" class="target-divs" style="width: 300px; height: 300px; background-color: #ddd;">
    右键点击我显示自定义菜单
</div>

<div id="contextMenu" class="context-menu">
    <div class="context-menu-item" onclick="handleItemClick('复制')">复制</div>
    <div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div>
    <div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div>

<script>
    const targetDivs = document.getElementsByClassName('target-divs');

    for (const div of targetDivs) {
        div.addEventListener('contextmenu', function (e) {
            e.preventDefault(); // 阻止默认右键菜单

            var menu = document.getElementById('contextMenu');
            menu.style.display = 'block';
            menu.style.left = `${e.pageX}px`;
            menu.style.top = `${e.pageY}px`;
        });
    }

    document.addEventListener('click', function () {
        document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单
    });

    function handleItemClick(itemName) {
        console.log(`用户点击了菜单项：${itemName}`);
        // 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作
        switch (itemName) {
            case '复制':
                // 执行复制操作...
                break;
            case '粘贴':
                // 执行粘贴操作...
                break;
            case '剪切':
                // 执行剪切操作...
                break;
        }
        document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单
    }
</script>

</body>
</html>

结果如下所示

在这个例子中，我们首先通过类名target-divs获取所有需要添加右键菜单功能的div元素，然后遍历这个集合，为每个元素添加右键菜单事件监听器。这样，在任何具有target-divs类名的div上右键点击时都会显示自定义菜单。

相关推荐
Java后端的Ai之路4 小时前
06-React-Props
前端·react.js·前端框架
Flynt4 小时前
开源"间谍卫星"说数据全是真的，我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn5 小时前
渲染管线
前端
程序员大阳5 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝5 小时前
Vue3 零基础每日笔记（082）：文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金6 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉6 小时前
借助 Codex 和可视化工作流，从调研到完整实现，3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH6 小时前
HTML 的 ＜wbr＞ 元素
前端·html
Dovis(誓平步青云）7 小时前
常用命令藏得太深？怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
IT_陈寒7 小时前
Vite的这个问题坑了我三天，原来如此解决！
前端·人工智能·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05如何新建文件夹？ 电脑新建文件夹的4种方法06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08Telegram APK 下载安装完整指南 — 2026年最新09轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新