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上右键点击时都会显示自定义菜单。

相关推荐
文火冰糖的硅基工坊14 分钟前
[嵌入式系统-146]：五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_8370885027 分钟前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili35 分钟前
用 Tinymce 打造智能写作
前端
angelQ42 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
（临时解决）Chrome调试避免跳入第三方源码（设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本）
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
用户6600676685391 小时前
用HTML5 构建一个敲击乐钢琴
html
云中雾丽1 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说1 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天｜Meetup 议题已公开，Copilot 月卡等你来拿！
前端·后端
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南072025软件测试面试八股文（含答案+文档）08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09Labelme从安装到标注：零基础完整指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示