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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

个人觉得好的文章链接推荐【转载,侵权立删】

声明&#xff1a;本篇博客为博主学习后端中觉得好的文章&#xff0c;不定期更新。上方是链接&#xff0c;下方是作者简介以及内容简介。均为转载&#xff0c;来源不限&#xff0c;若有侵权&#xff0c;请联系博主&#xff0c;或者是在评论区留言&#xff0c;侵权立删&#xff0…

DeepMind提出强化学习新方法,可实现人机合作

来源&#xff1a;AI前线作者&#xff1a;Ben Dickson译者&#xff1a;盖策划&#xff1a;凌敏本文来自 BDTechTalks 网站的“AI 研究论文评论”专栏。该专栏提供人工智能最新发现的系列解读文章。尽管人工智能研究人员正力图建立能在围棋、星际争霸到 Dota 等复杂游戏中击败人类…

C++学习——类的初始化

文章目录1.类通过构造函数进行数据成员初始化2.类成员初始化方式&#xff1f;3.什么情况下必须使用列表初始化&#xff1f;4.为什么用列表初始化成员变量会快一些&#xff1f;5.派生类构造函数的执行顺序1.类通过构造函数进行数据成员初始化 一般来说&#xff0c;类中的数据成…

队列模块(Queue)

#!/usr/bin/env python # codingutf-8import Queue import time https://docs.python.org/2/library/queue.htmlQueue模块在Python 3中改名为queue了。 Queue模块实现了多个生产者消费者列队&#xff0c;可以在多线程中进行安全的信息交换。 Queue模块定义了三个类&#xff1a;…

C++学习——构造函数,析构函数与虚函数关系

文章目录1.构造函数&#xff0c;析构函数可以为虚函数吗&#xff1f;2.析构函数和构造函数的作用&#xff1f;3.构造函数和析构函数调用顺序&#xff1f;4.类什么时候会调用析构函数&#xff1f;1.构造函数&#xff0c;析构函数可以为虚函数吗&#xff1f; 构造函数不可以&…

军事大脑的构建对未来战争的影响

前言&#xff1a;本文是我与军事科学院的赵蔚婷,王婉两位老师在2020年4月发表的一篇论文&#xff0c;首发在《中国科技论文在线》&#xff0c;是将互联网大脑模型与军事领域结合&#xff0c;形成军事大脑和军事超级智能的概念体系&#xff0c;重点提出军事神经元和军事云反射弧…

00001-整数倒置-Java-leetcode-要考虑到溢出问题

leetcode-整数倒置 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.com/problems/reverse-integer 著作权归领扣网络所有。商业转载请联系官方授权&#xff0c;非商业转载请注明出处。给出一个 32 位的有符号整数&#xff0c;你需…

size - 列出段节大小和总共大小

总览 (SYNOPSIS) size[-A|-B|--formatcompatibility] [--help] [-d|-o|-x|--radixnumber] [--targetbfdname] [-V|--version] objfile...描述 (DESCRIPTION) GNU 的 size 程序 列出 参数列表 objfile 中, 各 目标文件(object) 或 存档库文件(archive) 的 段节(section)大小 ---…

C++学习——默认构造函数

默认构造函数在这篇博客中已经写得很明白。 https://blog.csdn.net/bear_n/article/details/72798301 文章目录1.什么是默认构造函数&#xff1f;2.什么情况会自动生成默认构造函数&#xff0c;即编译器生成默认构造函数&#xff1f;1.什么是默认构造函数&#xff1f; 默认构造…

斯坦福抢开“元宇宙”第一课,上起来还真不便宜

过去半个世纪&#xff0c;斯坦福教给学生的技术&#xff0c;促成了硅谷的诞生&#xff1b;而为了将来的 Web3 时代&#xff0c;斯坦福也已经做好了准备。来源&#xff1a; 硅星人文&#xff1a;杜晨 编辑&#xff1a;VickyXiao今年10月底&#xff0c;硅谷顶级科技公司 Facebo…

00002-两数之和-leetcode-1.暴力法(枚举法),2.哈希表法,目前更新了枚举法

两数之和 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.com/problems/two-sum 著作权归领扣网络所有。商业转载请联系官方授权&#xff0c;非商业转载请注明出处。 给定一个整数数组 nums 和一个目标值 target&#xff0c;请你在…

c++ 字符串转数字

#字符串转整数 string ss"-99"; cout<< stoi(ss)<<endl; 转载于:https://www.cnblogs.com/sea-stream/p/11100398.html

C++学习——抽象类

文章目录1.抽象类1.1 什么是抽象类&#xff1f;1.2 抽象类的作用?1.3 使用抽象类时注意2.抽象基类为什么不能创建对象&#xff1f;1.抽象类 1.1 什么是抽象类&#xff1f; 带有纯虚函数的类为抽象类 1.2 抽象类的作用? 抽象类的主要作用是将有关的操作作为结果接口组织在一个…

00003-回文数的判定-leetcode-解法不唯一,1.reverse最简单,2.数学方法很有意思

回文数的判定 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.com/problems/palindrome-number 著作权归领扣网络所有。商业转载请联系官方授权&#xff0c;非商业转载请注明出处。 判断一个整数是否是回文数。回文数是指正序&…

加拿大工程院院士于非:互联—— 从质量、能源、信息到智能

来源&#xff1a;AI科技评论整理&#xff1a;莓酊编辑&#xff1a;青暮2021年12月9日&#xff0c;第六届全球人工智能与机器人大会&#xff08;GAIR 2021&#xff09;在深圳正式启幕。140余位产学领袖、30位Fellow聚首&#xff0c;从AI技术、产品、行业、人文、组织等维度切入&…

常用命令之------ln

当我们需要在不同的目录&#xff0c;用到相同的文件时&#xff0c;我们不需要在每一个需要的目录下都放一个必须相同的文件&#xff0c;我们只要在某个固定的目录&#xff0c;放上该文件&#xff0c;然后在 其它的目录下用ln命令链接&#xff08;link&#xff09;它就可以&…

C++学习——继承

文章目录1.C中类成员的访问权限和继承权限问题2.多继承的优缺点3. 继承机制中对象之间如何转换4.组合与继承优缺点1.C中类成员的访问权限和继承权限问题 三种访问权限 public:用该关键字修饰的成员表示公有成员&#xff0c; 该成员不仅可以在类内可以被访问&#xff0c;在类外…

00004-括号匹配问题-牛客网-要考虑各种情况

括号匹配问题 链接&#xff1a;https://ac.nowcoder.com/acm/contest/3530/E 来源&#xff1a;牛客网 众所周知&#xff0c;佳爷是集训队最强&#xff0c;他经常喜欢鄙视集训队最菜的PC&#xff0c;这天他又来了&#xff0c;他丢给PC一道题目&#xff1a; 给你一个字符串&am…

2021年诺贝尔经济学奖评述:解决重大社会问题的自然实验因果框架

来源&#xff1a;集智俱乐部作者&#xff1a;诺奖委员会译者&#xff1a;邓宇昊 编辑&#xff1a;邓一雪 导语许多重大社会问题都涉及到因果分析。比如&#xff0c;接受更长时间的教育是否会让你未来的收入增加&#xff1f;提高最低工资对一个地方的就业会产生怎样的影响&…

C++学习——拷贝构造函数和移动构造函数

文章目录1.拷贝构造函数2.移动构造函数1.拷贝构造函数 拷贝构造函数&#xff0c;它是一种特殊的构造函数。它的作用就是用一个已经生成的对象来初始化另一个同类的对象。 当类中拥有指针类型的成员变量时&#xff0c;拷贝构造函数中需要以深拷贝&#xff08;而非浅拷贝&#xf…