js实现上下文菜单

于 2021-05-13 10:29:44 发布
阅读量401 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116707909
版权

上下文菜单在web开发中也叫作右键菜单，在web开发中比较常见。如果后台系统用的前端插件，比如easyui等，本身就附带了这种上下文控件，但是如果想要自己实现，该如何做呢？这里我分享一个给各位朋友，先看下最终的整体效果：

这里面有两个要解决的问题：
如何准确的获取鼠标右键点击的位置，并让原本隐藏的菜单在该位置显示出来。
当页面高度很高，以至于在页面最右边出现滚动条的时候也要确保弹出菜单的位置是正确的。
如何解决？
我们来看，如果想要获取鼠标的点击位置，我们可以通过事件的pageX或者clientX，但是这两个用哪一个呢？因为pageX是指文档窗口最左边到鼠标点击位置的距离(pageY同理，是文档窗口最上边到鼠标点击位置的距离),而clientX是可视窗口最左边到鼠标点击位置的距离（clientY同理，是可视窗口最上边到鼠标点击位置的距离）。也就是说pageX的值是包含滚动条滚出的距离的，所以在这里要想确保弹出菜单的位置是正确的，我们要用pageX和pageY。
    2.还有一点要注意，比如我上面的弹出菜单是一个ul，ul本身padding和margin是不为0的，这样子的话，即便你使用了pageX和pageY,上下 文菜单弹出的时候还是和你鼠标点击的位置有一个padding或者margin的偏差，所以还要在ul中设置margin和padding为0。
下面是具体的代码实现部分，为了达到让页面有滚动条的效果，我复制了很多行table的tr标签，所以显得html很长。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文菜单</title>
</head>
<body> 
  <ul class="menu" id="menu">
          <li>删除</li>
        <li class="sep"></li>
        <li>修改</li>
        <li class="sep"></li>
        <li>查看详细信息</li>
  </ul>
  <table class="datatable">
      <tr>
        <th>日期</th>
        <th>时间</th>
        <th>银行名称</th>
        <th>账号</th>
        <th>出入账名称</th>
        <th>金额</th>
        <th>对方国别</th>
        <th>交易性质名称</th>
      </tr>
         <tr>
          <td>2016-6-1</td>
          <td>09:30:08</td>
          <td>上海浦东发展银行上海分行</td>
          <td>FTN9884554100002014</td>
          <td>入账</td>
          <td>2,199,975.00</td>
          <td>香港</td>
          <td>一般贸易</td>
         </tr>
             <tr>
          <td >2016-6-1</td>
          <td>09:30:08</td>
          <td>上海浦东发展银行上海分行</td>
          <td>FTN9884554100002001</td>
          <td>出账</td>
          <td>14,447,235.82</td>
          <td>中国</td>
          <td>货物</td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>09:28:43</td>
          <td>上海浦东发展银行上海分行</td>
          <td>FTE9799539000001601</td>
          <td>出账</td>
          <td>1,528,818.94</td>
          <td>中国</td>
          <td>因金融衍生工具交易引起的收入/因金融衍生工具交易引起的支出</td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>09:28:43</td>
          <td>上海浦东发展银行上海分行</td>
          <td>FTE9804545000000114</td>
          <td>出账</td>
          <td>9,770.00</td>
          <td>香港</td>
          <td>一般贸易</td>
         </tr>
         <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr> <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
          <tr>
          <td >2016-6-1</td>
          <td>08:41:22</td>
          <td>上海电气财务公司（上海）</td>
          <td>FTE3105016536000000000501</td>
          <td>入账</td>
          <td>6,200,000.00</td>
          <td>中国</td>
          <td>财务公司集团内部上存/下划</td>
         </tr>
    </table>     
</body>
</html>

乐之者java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
博客
解锁swing技术新姿势，坦克大战游戏-java swing项目再实战
09-20 815
这，这是一个围绕Java swing技术趣味级的学习，助你解锁swing技术新姿势，更给力的项目，更用心的创作。除了可以巩固swing必备的基础之外，尤其涉及swing绘图技术、多线程操作、线程安全，io流的实际应用场景，分析透彻，说实话，不看，你亏大发了！！！ 来看看界面和游戏功能。1.欢迎界面：2.游戏界面3.菜单功能新鲜不新鲜？作为程序员，是不是想一探究竟，我相信，你是你这个好奇心的，GO!第一种方法:http://www.roadjava.com/...
博客
ye读春秋左传系列视频讲解
06-12 905
ye读春秋左传系列第一部之鲁隐公篇,左传名篇解读,左传故事1.左传这本书,春秋这个时代2.郑伯克段于鄢3.黄泉相见4.周郑交恶5.宋宣公知人6.石碏谏宠州吁7.东门之役8.玩火自焚原来是来自这里9.大义灭亲的故事10.臧僖伯谏观鱼11.怙恶不悛的故事12.姓与氏不同13.公子突败戎师14.围郑救宋15.郑庄公戒饬守臣16.鲁隐公之死ye读春秋左传系列第二部之鲁桓公篇,左传名篇解读,春秋左传故事https://www.bilibili.c
博客
五分钟搭建ftp服务器，真的不含糊
11-11 1153
五分钟搭建ftp服务器，真的不含糊
博客
sftp、ftp、ssh以及vsftpd、sshd的区别与关系
11-11 2260
sftp、ftp、ssh以及vsftpd、sshd的区别与关系
博客
服务器日常维护命令
06-23 793
查看最占用内存的前十条进程：psaux|grep-vPID|sort-rn-k+3|head查看正在监听的端口：netstat-anptop命令简化(以兆为单位返回linux系统内存)：free-mtop:shift+m(按内存使用大小排序)服务器重启之后01、如果防火墙firewalld未自动启动，需要手动启动：systemctlstartfirewalld02、启动web容器cd/usr/local/tomcat/bin./s...
博客
linux文章迁移之一
06-23 508
一、passwd文件x:表示有密码用户id0：超级管理员，要想让某个用户像root一样，就需要改为0 1-499：伪用户 500以上：普通用户初始组（创建用户的时候就创建了一个和用户名一样的组名）id[跟group文件匹配] ，另有附加组的概念禁止某人登录，改为/sbin/nologin每个用户的邮箱：/var/spool/mail/user1每次加新用户时在其家目录下生成的文件：/etc/skel二、linux中错误处理1和2描述 设备文件名 描述符 ...
博客
Bourne和c shell
06-23 608
shell的两大分支：Bourne家族(.sh)和c shellbshell：bshell就是sh(unix) ksh bash等。linux中/etc/shells文件显示本机器支持的shell，如：执行shell脚本的方式：sh 绝对路径或相对路径或者 ./helo.sh注意点：记得脚本要赋予可执行权限...
博客
数据库表设计最佳实践
06-14 408
为了表良好的扩展性，设计数据库表的时候需要格外注意，基于多年经验，给出如下最佳的建表模板：CREATETABLE`user_info`(`id`bigint(24)NOTNULLAUTO_INCREMENTCOMMENT'标识',`name`varchar(50)DEFAULTNULLCOMMENT'用户名',--其他业务字段`gmt_created`datetimeNOTNULLDEFAULTCURRENT_TIMESTAM...
博客
mybatis中${value}的使用
06-12 1790
为什么要使用${value}？ 上篇文章介绍了mybatis的select标签，我们知道在mybatis中，查询语句可以写在select标签内部即可完成相应的查询工作，但是由于业务的复杂性，有时候难免要自己去拼接sql并执行，如果你使用了spring的话，你可能会想到使用jdbctemplate来执行自己的sql，但是这个时候有个问题，什么问题呢？理论上来说，JdbcTemplate应该这样使用：@RepositorypublicclassBackupDaoIm...
博客
selectKey
06-12 675
有时候我们新增一条数据之后，还需要获取到这条新增数据的主键，以便在其他业务中继续使用，当然拿mysql来举个例子，你可以在执行完插入之后，再去执行一下“SELECT LAST_INSERT_ID()”来获取刚才插入后的主键id，但是这样显得既麻烦又没有效率，用mybatis可以通过selectKey标签一次性完成这种需求。分两种情况的主键来说，一是自增主键，就是自增类型的int了，一是非自增的主键，比如使用uuid（mysql有 uuid()函数）。一、自增类型的主键：ma...
博客
Mybatis配置useGeneratedKeys 参数
06-12 837
Mybatis 配置文件 useGeneratedKeys 参数只针对 insert 语句生效，默认为 false。当设置为 true 时，表示如果插入的表以自增列为主键，则允许 JDBC 支持自动生成主键，并可将自动生成的主键返回。配置mybatis的配置文件，设置useGeneratedKeys属性值为true：<settings><settingname="useGeneratedKeys"value="true"/>&l...
博客
迁移html和css之四
05-13 395
五十一、display: flex;与justify-content实现均匀分布html： <divclass="box"> <section>条目1</section> <section>条目2</section> <section>条目3</section> </div>css:.box{ display:flex; justify-content:...
博客
迁移html和css之三
05-12 512
三十一、css代表着什么，css规则是什么意思？CSS（全拼是 Cascading Style Sheets，翻译过来就是"层叠样式表"的意思）控制 DOM 元素的视觉外观，css控制的是元素的样式，不然怎么叫样式表呢。下面就是一条简单的 CSS 样式：body{background-color:white;color:black;}css如何书写？CSS 样式由选择符和属性组成。选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性声...
博客
迁移html和css之二
05-12 367
二十一、CSS3前缀 浏览器 厂商前缀 chrome、safari -webkit- opera -o- firfox -moz- internetexplorer -ms- 上标列出的是css前缀，为什么会有这些前缀呢？新的css属性发布还未纳入w3c标准之前如果各个厂商想使用，一般加..
博客
迁移html和css之一
05-12 544
一、html元素的理解html元素，也叫html标签，是用来改变网页结构的作用。也就是说“标记”的作用 ：就是通过给内容添加标签来创建元素的过程。html标签写法注意点：01.HTML 标签以 < 开头，以 > 结束，比如表示段落文本的 <p>。02.标签一般都成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素。03.结束标签用一个斜杠表示元素的关闭或结束，比如 </p>。如...
博客
迁移其他jquery文章之二
05-12 340
十一、jquery动画show,slideUp,fadeIn,fadeTo等对比jquery的动画方法：1.显示与隐藏show([数值/预设],[fn])和hide([数值/预设],[fn])和toggle([数值/预设])，这些方法的实质其实就是设置display属性2.向上滑动与向下展开slideUp([数值/预设],[fn])和slideDown([数值/预设],[fn])和slideToggle([数值/预设])...
博客
bootstrap-datetimepicker使用
05-12 618
bootstrap-datetimepicker官方网址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm，上边有更详细的介绍，这里我举一个综合的例子，效果如下：使用的bootstrap是v3.3.5.<!doctypehtml><html><head><metacharset="utf-8"><title>bootstrap-datetimepicke..
博客
jquery ui 之datepicker的使用
05-12 2539
一、jquery插件机制介绍jquery插件机制的介绍jquery因为他的开源特性，大家都愿意聚集在它的周围，这也直接导致了jquery丰富的插件，据不完全统计，其插件个数已经超过千种，大致可以归为ui类（如jquery ui）、验证类（如表单验证插件jquery-validate.js）、特效类(如eayui等各种组件)、工具类(如json操作工具JSON2.js)等。jquery插件分为哪几种？一、自定义插件(可以提高系统的封装性)：基...
博客
easyui使用易错点
05-12 623
一、easyui报错:form[0].submit is not a function使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。原因：easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现...
博客
迁移其他jquery文章之一
05-12 275
一、jquery的dom操作之插入节点内部插入节点select.append(content/select) 向每个匹配的元素尾部追加内容select.appendTo(select) 把所有匹配的元素追加到指定的select的尾部select.prepend(content/select)select.prependTo(select)外部插入节点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值