javascript——自定义右键菜单

最新推荐文章于 2025-08-23 11:44:58 发布

weixin_33991418

最新推荐文章于 2025-08-23 11:44:58 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bokebi520/p/4359763.html

本文介绍了一种使用HTML、CSS及JavaScript实现自定义右键菜单的方法。通过监听右键点击事件并显示带有指定位置的浮动菜单，同时阻止浏览器默认的右键菜单出现。点击页面任意位置将隐藏此自定义菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分：

#div1{ width: 100px; height: 200px; border: 1px solid #333; position: absolute; display: none;}

HTML部分：

<div id="div1"></div>

JS部分：

window.onload = function(){

        var oDiv = document.getElementById('div1');

        //自定义右键菜单
        document.oncontextmenu = function(ev){

            var ev = ev || event;

            oDiv.style.display = 'block';    

            oDiv.style.left = ev.clientX + 'px';
            oDiv.style.top = ev.clientY + 'px';

            return false;                //阻止右键菜单的默认行为
        };

        document.onclick = function(){

            oDiv.style.display = 'none';    //点击文档隐藏右键菜单
        };
    };