【web】自定义浏览器鼠标右键菜单

最新推荐文章于 2024-08-02 16:36:52 发布

Y__Cheng

最新推荐文章于 2024-08-02 16:36:52 发布

阅读量6.9k

点赞数 4

分类专栏： web 前（台）端（菜）文章标签：浏览器自定义菜单定制右键菜单浏览器右键菜单浏览器改变右键菜单自定义浏览器右键菜单

本文链接：https://blog.csdn.net/qq_33744228/article/details/90514042

版权

前（台）端（菜）同时被 2 个专栏收录

35 篇文章 4 订阅

订阅专栏

web

30 篇文章 5 订阅

订阅专栏

我们电脑桌面，文件夹或者浏览器等等一些地方，鼠标左键功能都一样，鼠标右键各有各的功能，都对应各自功能需求而定制的菜单；所以我们也可以定制自己的个性右键菜单，让菜单更美观，更有个性。

这里就写出浏览器如何自定义菜单（电脑桌面的呢，抱歉超出了我能力范围了）

定制菜单如下：

在这里插入图片描述
样式的话，因人而异，你们随意发挥了

* {
      margin: 0;
      padding: 0;
    }
    .menu {
      width: 100px;
      border: 1px solid #ccc;
      position: absolute;
      box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
      display: none;
    }
    .menu li {
      list-style: none;
      width: 100%;
    }
    .menu li span {
      display: inline-block;
      text-decoration: none;
      color: #555;
      width: 100%;
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
    }
    .menu li:first-of-type {
      border-radius: 5px 5px 0 0;
    }
    .menu li span:hover{
      background: #eee;
      color: #CC1A1A;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鼠标右键</title>

</head>
<body>
  <ul class="menu" id="menu">
    <li><span>复制</span></li>
    <li><span>粘贴</span></li>
    <li><span>刷新</span></li>
    <li><span>其他功能1</span></li>
    <li><span>其他功能2</span></li>
  </ul>
</body>
</html>

主要事件：
oncontextmenu()：在元素中用户右击鼠标时触发并打开上下文菜单。

注意兼容：
所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

 window.onload = function () {
      // 获取节点
      var menu = document.getElementById('menu');

      //获取可视区宽度,高度
      var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
      var winHeight = document.documentElement.clientHeight || document.body.clientHeight;

      // 点击空白区域 隐藏菜单
      document.addEventListener('click', function () {
        menu.style.display = 'none';
        menu.style.left = 0 + 'px';
        menu.style.top = 0 + 'px';
      })

      // 点击菜单
      menu.addEventListener('click', function (e) {
        var e = e || window.event;
        console.log(e.target.innerText)
      })

      //右键菜单
      document.oncontextmenu = function (e) {
        var e = e || window.event;
        menu.style.display = 'block';
        // 获取鼠标坐标
        var mouseX = e.clientX;
        var mouseY = e.clientY;

        // 判断边界值，防止菜单栏溢出可视窗口
        if (mouseX >= (winWidth - menu.offsetWidth)) {
          mouseX = winWidth - menu.offsetWidth;
        } else {
          mouseX = mouseX
        }
        if (mouseY > winHeight - menu.offsetHeight) {
          mouseY = winHeight - menu.offsetHeight;
        } else {
          mouseY = mouseY;
        }
        menu.style.left = mouseX + 'px';
        menu.style.top = mouseY + 'px';
        return false;
      }
    }