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

最终样式如下:

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

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

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

上一篇:javascript之有趣的【BOM】深入学习


下一篇:VueX 的使用,小白一定要看!