开发者社区> Villin> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js实现仿桌面右键,出现右键菜单功能

简介: javascript有右键事件,可以利用这个事件,实现右键菜单功能。 喜欢点个赞。转发备注出处。
+关注继续查看

最终样式如下:

image.png

功能需求:和电脑桌面一样,灰色的是自定义桌面区域(或全屏,或固定大小范围,本次为固定大小举例),绿色的为右键菜单,当点击右键时,需显示菜单,左键单点消失。
**
实现思路:**

0、首先禁用浏览器自带默认右键行为。
1、两个盒子,一个桌面区域div,一个右键菜单div。
2、菜单默认隐藏,在桌面div中点击右键,显示菜单。
3、拿到右键点击的left和top值,并将弹窗定位到这个位置。
4、最后检查点击位置,控制菜单显示区域,防止菜单超出桌面。

你需要知道的js方法:

1、右键事件:oncontextmenu
2、禁用浏览器默认行为 e.preventDefault()
3、获取div左上角坐标 div.offsetLeft 和 div.offsetTop
4、获取div实际宽高 div.getBoundingClientRect().width 和 div.getBoundingClientRect().height
5、Dom基本操作

开始:

现将样式写出来:

HTML代码:

<div id="box">
    <div id="menu">右键菜单</div>
</div>
CSS代码:

 <style>

    #box {
      width: 1000px;
      height: 600px;
      background: #Ccc;
      margin: 0 auto;
      margin-top: 100px
    }

    #menu {
      position: absolute;
      min-width: 100px;
      height: 200px;
      background: #9f9;
      display: none;
    }
    
  </style>

实现js逻辑:


    var box = document.getElementById('box'); // 桌面区域
    var menu = document.getElementById('menu') // 右键菜单
    let b_w = box.getBoundingClientRect().width; // 桌面区域宽度
    let b_h = box.getBoundingClientRect().height; // 桌面区域高度
    let b_cX = box.offsetLeft; // box左上角left
    let b_cY = box.offsetTop; //  box左上角top
    
    box.oncontextmenu = function (e) { // 右键事件
      menu.style.display = "block"; // 菜单显示
      menu.style.top = e.clientY + 'px' // 根据点击位置定位菜单位置top
      menu.style.left = e.clientX + 'px'  // 根据点击位置定位菜单位置left
      let m_w = menu.getBoundingClientRect().width; // 菜单宽度
      let m_h = menu.getBoundingClientRect().height; // 菜单高度

      // 控制菜单弹出区域,不能超过桌面右侧和下侧最大范围
      if (e.clientX > (b_cX + b_w - m_w)) {
        menu.style.left = (e.clientX - m_w) + 'px'  // 如果菜单超出桌面宽度,让菜单向左偏移本身宽度
      }
      if (e.clientY > (b_cY + b_h - m_h)) {
        menu.style.top = (b_cY + b_h - m_h - 5) + 'px'  //  如果菜单超出桌面高度,让菜单定位到这个位置,为了美观,菜单栏与底部桌面留有5px间距
      }
    }


    // window区域点击菜单栏均消失
    window.onclick = function (e) {
      menu.style.display = "none";
    }
    
    // 禁用window区域右键默认菜单弹窗
    window.oncontextmenu = function (e) {
      e.preventDefault();
    }

-
-
-

以上就是博主实现的右键菜单实现方式,如果有更好的方式,欢迎沟通。
wechat:villinWeChat

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[POJ] John‘s trip | 欧拉回路 | 边序列字典序最小 + 建图
Description Little Johnny has got a new car. He decided to drive around the town to visit his friends. Johnny wanted to visit all his friends, but there was many of them. In each street he had one friend. He started thinking how to make his trip as short as possible.
21 0
idea文件右键创建New没有Create New Servlet的解决办法
idea文件右键创建New没有Create New Servlet的解决办法
63 0
前端:vue3+ts,后端:koa2+jwt,实现登陆功能(前端部分)
前端:vue3+ts,后端:koa2+jwt,实现登陆功能(前端部分)
24 0
Elasticsearch批量导入本地Json文件Java实现
题记 产品开发需要,我们需要将互联网采集的数据存储到ES中,以实现数据的全文检索。 互联网采集的数据,往往格式杂乱,需要先进行数据清洗操作。 而ES支持的入库格式,json格式数据会相对方便些。 本文主要介绍,如何将格式化的Json文件批量插入到ES中。
355 0
Elasticsearch批量导入本地Json文件Java实现
本文主要介绍,如何将格式化的Json文件批量插入到ES中。
2006 0
iOS 混合应用的关键点分析 - 仿 Android 平台 WebView 可注入本地对象方法的功能实现要点
iOS 混合应用的关键点分析 - 仿 Android 平台 WebView 可注入本地对象方法的功能实现要点 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
858 0
+关注
Villin
一个前端小白,大家一起学习
30
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载