原生JS自定义鼠标右键菜单

最新推荐文章于 2024-07-17 16:03:57 发布

一只不太聪明的燕子

最新推荐文章于 2024-07-17 16:03:57 发布

阅读量1.1k

点赞数

分类专栏： JavaScript web前端 JS 文章标签： js javascript es6 前端 css

本文链接：https://blog.csdn.net/weixin_42678796/article/details/107217762

版权

web前端同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

13 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

总体思路：

为document对象绑定右键菜单事件（contextmenu），事件触发后，首先要阻止浏览器的默认行为（浏览器提供的右键菜单）出现。然后把我们自定义的菜单显示在鼠标的当前位置。

利用事件委托为菜单项绑定鼠标移入(mouseover)，移出(mouseout)，单击(click)事件。

具体实现过程详见代码和注释

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义鼠标右键菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #menuBox{
            border: 1px solid paleturquoise;
            display: none;
            position: absolute;
        }
        li{
            list-style: none;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <ul id="menuBox">
        <li>全选 ctrl+A</li>
        <li>复制 ctrl+C</li>
        <li>剪切 ctrl+X</li>
        <li>粘贴 ctrl+V</li>
    </ul>
</body>
</html>
<script>
    // 获取右键菜单
    var menuBox = document.querySelector("#menuBox");
    // 获取右键菜单中的所有菜单项
    var lis = document.querySelectorAll("li");
    
    // 为文档绑定右键菜单事件
    document.oncontextmenu = function(e){
        e = e || window.event;
        // 阻止浏览器的默认行为
        if ( e && e.preventDefault ) {
            e.preventDefault();//防止浏览器默认行为(W3C) 
        } else {
           window.event.returnValue = false;//IE中阻止浏览器行为 
        }
        // 事件被触发时，显示右键菜单
        menuBox.style.display = "inline-block";
        // 位置定位在当前鼠标的位置
        menuBox.style.left = e.clientX + "px";
        menuBox.style.top = e.clientY + "px";
    }

    // 为右键菜单绑定鼠标移入事件
    menuBox.addEventListener("mouseover",function(e){
        e = e || window.event;
        if(e.target == menuBox){
            return;
        }else{
            for(var i=0; i<lis.length; i++){
                // 先将所有菜单项恢复默认背景颜色
                lis[i].style.backgroundColor = "#fff";
            }
            // 设置当前菜单项背景颜色为高亮
            e.target.style.backgroundColor = "paleturquoise";
        }
    },false);
    // 为右键菜单绑定鼠标移出事件
    menuBox.addEventListener("mouseout",function(e){
        // 将当前菜单项恢复默认背景颜色，以防下次右击时出现上次残留的背景色
        e.target.style.backgroundColor = "#fff";
    },false)

    // 为右键菜单绑定click事件
    menuBox.addEventListener("click",function(e){
        e = e || window.event;
        // 获取被单击得菜单项内容
        console.log(e.target.innerText);
        // 当某个菜单项被单击时，将右键菜单隐藏
        menuBox.style.display = "none";
    },false);

    // 为document对象绑定单击事件
    document.addEventListener("click",function(){
        // 在右键菜单之外单击时，将右键菜单隐藏
        menuBox.style.display = "none";
    },false);
</script>