js实现右键单击打开自定义的菜单

　　今天分享一个，单击鼠标右键弹出自定义菜单，选中不同菜单选项，实现其对应功能

　首先先自已定义一个菜单

    <div id="menu"><ul><li>添加</li><li>删除</li><li>修改</li></ul></div>

　　对菜单进行简单的样式设置，并且设置为隐藏状态

    #menu {width: 80px;background: #CCC;position: absolute;display: none;}

　主体区域的内容代码

    <div id="content">前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。</div>

　　在这个content容器里实现鼠标的右键打开菜单功能，主要的js代码如下

<script>　　　　//　获取当前的元素var content = document.getElementById("content");      content.oncontextmenu = function (ev) {//阻止鼠标的默认事件ev.preventDefault();            //做一些兼容性的处理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;}// 事件委托的方式 实现自定义菜单的功能var ul = document.querySelector('ul')ul.onclick = function (e) {var t = e.targetif (t.innerText == '添加') {输入你想实现的功能代码，并且点击后把菜单隐藏menu.style.display = "none";}}       </script>

　　通过事件委托，判断每次点击菜单的内容，写出相应的逻辑代码，完成相应的功能。

contextmenu事件支持所有 HTML 元素，这意味者你可以给不同的元素，自定义不同的右键菜单。

转载于:https://www.cnblogs.com/zhige-1/p/11097044.html

js实现右键单击打开自定义的菜单相关推荐

鼠标左键单击时使用纯js触发右键单击
鼠标左键单击时使用纯js触发右键单击 onClick={e => {// 模拟右键点击const { clientX, clientY } = econst rightFun = new Mou ...
Qt编程之右键单击QTreeWidgetItem弹出菜单
其实有这个需求很好理解,就是我有个project manager,上面的TreeWidgetItem都表示一个工程,我需要右键创建新的工程,或者删除.这个在很多普通软件中也见得多.在弹出的菜单中加入相 ...
使用Bootstrap制作右键单击自定义菜单
我们可以轻松地通过右键单击创建一个漂亮的自定义菜单. 让我们创建一个div右键单击启用自定义菜单. <div class="col-lg-6 bg-info" id=&quo ...
java 右键卡死_为什么右键单击不适用于Java应用程序？
小编典典右键单击效果很好-在Swing中,不要获取您在其他应用中习惯的上下文菜单是很正常的.如果您希望有一个右键单击打开的弹出菜单,例如具有剪切/复制/粘贴操作- 您必须自己实现.我在我的应用程序中 ...
【电脑Windows日常】如何在 Windows 11 中自定义右键单击上下文菜单、自定义或者删除右键菜单的选项，包括桌面、文件夹和文件——详细教程（5个方法）
前言虽然许多人喜欢Windows 11 的简化右键单击上下文菜单,但有些人对截断的菜单不太满意.让我们看看一些根据您的喜好对其进行自定义的方法. 而且,很多默认的应用会使得右键菜单非常臃肿,需要进一 ...
Excel（VBA）自定义右键单击菜单以启动宏(示例代码)
主要介绍 Excel(VBA)自定义右键单击菜单以启动宏(示例代码)以及相关的经验技巧 THISWORKBOOK (paste into ThisWorkbook, macros that open ...
右键脚本html,js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 #menu { height: 200px; width: 50px; border: 1px solid gray; back ...
electron Tary托盘、主菜单、右键单击菜单出现
main.js const { app, BrowserWindow, Menu } = require('electron') const path = require('path')//引入主菜单 ...
【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一.这是什么样的一个插件我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,例 ...

js实现右键单击打开自定义的菜单

js实现右键单击打开自定义的菜单相关推荐

最新文章

热门文章