js实现完全自定义可带多级目录的网页鼠标右键菜单方法

实现完全自定义可带多级目录的网页鼠标右键菜单的方法，一般需要以下步骤：

1. HTML结构

首先，创建一个HTML菜单结构，包含多级目录的层级关系，可以使用<ul>和<li>元素实现，例如：

<ul id="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul>
      <li><a href="#">二级菜单1</a></li>
      <li><a href="#">二级菜单2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul>
      <li><a href="#">二级菜单3</a></li>
      <li><a href="#">二级菜单4</a></li>
    </ul>
  </li>
</ul>

2. CSS样式

样式用来展示鼠标右键菜单的外观效果，包括背景颜色、字体颜色、边框等，例如：

#menu {
  position: absolute;
  display: none;
  z-index: 999;
  border: 1px solid #999;
  background-color: #fff;
  color: #333;
  padding: 5px;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  list-style: none;
  margin: 0;
  padding: 2px 10px;
}

#menu li:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

#menu ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  border: 1px solid #999;
  background-color: #fff;
  color: #333;
  padding: 5px;
}

#menu li:hover > ul {
  display: block;
}

3. JavaScript实现

通常使用 JavaScript 实现鼠标右键菜单功能，主要包含以下步骤：

3.1 阻止浏览器默认右键菜单事件

document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
});

3.2 监听document点击事件，隐藏菜单

document.addEventListener('click', function (e) {
  document.getElementById('menu').style.display = 'none';
});

3.3 监听鼠标右键事件，显示菜单

document.addEventListener('mousedown', function (e) {
  if (e.button === 2) {
    var menu = document.getElementById('menu');
    menu.style.display = 'block';
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
  }
});

3.4 实现点击菜单项事件

var menuItems = document.querySelectorAll('#menu li');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', function (e) {
    alert(e.target.innerText);
  });
}

这样就可以实现一个基本的鼠标右键菜单功能了。

以下是一个完整的示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>自定义鼠标右键菜单</title>
  <style>
    #menu {
      position: absolute;
      display: none;
      z-index: 999;
      border: 1px solid #999;
      background-color: #fff;
      color: #333;
      padding: 5px;
    }

    #menu ul {
      margin: 0;
      padding: 0;
    }

    #menu li {
      list-style: none;
      margin: 0;
      padding: 2px 10px;
    }

    #menu li:hover {
      background-color: #f0f0f0;
      cursor: pointer;
    }

    #menu ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      border: 1px solid #999;
      background-color: #fff;
      color: #333;
      padding: 5px;
    }

    #menu li:hover > ul {
      display: block;
    }
  </style>
</head>

<body>
  <h1>自定义鼠标右键菜单</h1>
  <p>右键单击下面的区域试试：</p>
  <div id="contextmenu">
    <ul id="menu">
      <li>
        <a href="#">一级菜单1</a>
        <ul>
          <li><a href="#">二级菜单1</a></li>
          <li><a href="#">二级菜单2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">一级菜单2</a>
        <ul>
          <li><a href="#">二级菜单3</a></li>
          <li><a href="#">二级菜单4</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <script>
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
    });

    document.addEventListener('click', function (e) {
      document.getElementById('menu').style.display = 'none';
    });

    document.addEventListener('mousedown', function (e) {
      if (e.button === 2) {
        var menu = document.getElementById('menu');
        menu.style.display = 'block';
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
      }
    });

    var menuItems = document.querySelectorAll('#menu li');

    for (var i = 0; i < menuItems.length; i++) {
      menuItems[i].addEventListener('click', function (e) {
        alert(e.target.innerText);
      });
    }
  </script>
</body>

</html>

另一个示例是增强版，可以根据当前鼠标位置不断调整菜单的位置，保证菜单显示在浏览器可视区域内：

document.addEventListener('mousedown', function (e) {
  if (e.button === 2) {
    var menu = document.getElementById('menu');
    menu.style.display = 'block';
    menu.style.left =
      e.clientX + menu.offsetWidth > window.innerWidth ?
      window.innerWidth - menu.offsetWidth + 'px' :
      e.clientX + 'px';
    menu.style.top =
      e.clientY + menu.offsetHeight > window.innerHeight ?
      window.innerHeight - menu.offsetHeight + 'px' :
      e.clientY + 'px';
  }
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现完全自定义可带多级目录的网页鼠标右键菜单方法 - Python技术站