简单源生JS实现自定义右键菜单效果

女爷i 2022-06-14 23:09 136阅读 0赞

在写项目有时候我们需要自定义右键菜单，今天分享一下这个小例子；  
HTML代码：

<div id="menu">
        <ul>
            <li>帮助</li>
            <li>设置</li>
            <li>复制</li>
            <li>粘贴</li>
            <li>剪切</li>
        </ul>
    </div>

CSS代码：

*{ margin: 0; padding: 0; }
    #menu{ width: 80px; background: #CCC; position: absolute; display: none; }
    #menu ul{ width: 100%; list-style: none; border: 2px solid #666; border-bottom: 0px; }
    #menu ul li{ height: 30px; font-size: 16px; color: #333; line-height: 30px; text-align: center; border-bottom: 2px solid #666; }

JS代码：

window.onload=function(){
        var menu=document.getElementById("menu");
    
        document.oncontextmenu=function(ev){
            var ev=ev||event;
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
            menu.style.display="block";
            menu.style.left=ev.clientX+"px";
            //当滑动滚动条时也能准确获取菜单位置
            menu.style.top=ev.clientY+scrollTop+"px";
            //阻止默认事件
            return false;
        }
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt 隐藏右键选择菜单或自定义设置右键选择菜单

1. 隐藏右键选择菜单 QMainWindow上加了工具条，当在工具条上点击右键时会出现菜单，点击菜单会隐藏工具条或者是出现工具条。如果想取消在工具条上点击右键不...

我就是我/ 2024年04月19日 11:53/ 0 赞/ 47 阅读

相关自定义桌面菜单右键与文件夹右键

话不多说，效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

谁践踏了优雅/ 2023年07月01日 15:59/ 0 赞/ 307 阅读

相关自定义右键菜单

![在这里插入图片描述][20210423113622999.png] <template> <div class="tree"> <sp

太过爱你忘了你带给我的痛/ 2023年01月16日 02:37/ 0 赞/ 191 阅读

相关全局自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html全局自定义鼠标右键菜单 -

青旅半醒/ 2022年12月27日 02:00/ 0 赞/ 235 阅读

相关局部自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html局部自定义鼠标右键菜单局

╰+攻爆jí腚メ/ 2022年12月27日 01:59/ 0 赞/ 214 阅读

相关简单源生JS实现自定义右键菜单效果

在写项目有时候我们需要自定义右键菜单，今天分享一下这个小例子； HTML代码： <div id="menu"> <ul>

女爷i/ 2022年06月14日 23:09/ 0 赞/ 137 阅读

相关 Eclipse自定义右键New菜单

定制new菜单，点Window –> Customize Perspective: ![20180329100305813][] 选择new菜单所显示的快捷菜单

傷城~/ 2022年05月28日 03:56/ 0 赞/ 212 阅读

相关运用js实现自定义右键菜单的功能

1. 需求分析：设计一个自定义菜单，默认是隐藏的。当单击右键的时候，在浏览器中可以打开，进行显示菜单。当点击屏幕任意位置的时候，自定义的右键菜单可以关闭。 2. 设计思路：

待我称王封你为后i/ 2022年01月31日 15:15/ 0 赞/ 235 阅读

相关自定义右键菜单

禁止系统右键菜单 document.oncontextmenu=function(){ return false; //false表示事件

约定不等于承诺〃/ 2021年07月24日 18:39/ 0 赞/ 474 阅读

相关利用js实现自定义右键菜单插件

利用js实现自定义右键菜单插件 1、使用方式 js文件引入 ``<script src="RightMenu.js"></script> `` 初始化：

小灰灰/ 2020年06月07日 15:25/ 0 赞/ 744 阅读