js实现右键菜单栏功能

实现网页右键菜单栏功能一般需要用到 Javascript，可以通过两种方式来实现：自定义菜单和浏览器默认菜单。

自定义菜单

自定义菜单可以通过 JavaScript 代码，动态生成菜单结构，并设置菜单项的点击事件。具体实现过程如下：

1. 给需要添加右键菜单的元素绑定 contextmenu 事件，该事件会在用户在元素上右键点击时触发。例如，在以下 HTML 代码中，给 div 元素添加右键菜单：

<div id="myDiv">右键点击此处</div>

// 给元素绑定右键菜单事件
const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('contextmenu', event => {
  // 阻止默认的右键菜单弹出
  event.preventDefault();
  // 动态生成菜单结构
  const menu = document.createElement('ul');
  menu.innerHTML = `
    <li>菜单项一</li>
    <li>菜单项二</li>
  `;
  // 设置菜单样式，并添加到页面中
  menu.style.cssText = `
    position: absolute;
    top: ${event.clientY}px;
    left: ${event.clientX}px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style: none;
    z-index: 9999;
  `;
  document.body.appendChild(menu);
});

1. 在事件处理函数中使用 event 对象，获取用户点击鼠标的位置，根据位置动态计算菜单应该出现的位置。
2. 使用 createElement 方法创建菜单结构，并使用 innerHTML 属性赋值相应的 HTML 代码。
3. 给菜单项绑定点击事件，实现菜单项的功能。在示例中，我们只是简单地给菜单项添加了一个点击事件，并在控制台输出了相应的消息。

浏览器默认菜单

浏览器默认菜单是浏览器自带的右键菜单栏，可以通过 JavaScript 代码，禁用/修改默认菜单项，也可以添加自定义菜单项。具体实现过程如下：

1. 给需要添加右键菜单的元素绑定 contextmenu 事件，该事件会在用户在元素上右键点击时触发。例如，在以下 HTML 代码中，给 div 元素添加右键菜单：

<div id="myDiv">右键点击此处</div>

// 给元素绑定右键菜单事件
const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('contextmenu', event => {
  // 阻止默认的右键菜单弹出
  event.preventDefault();
  // 修改默认菜单项
  const menu = event.target.ownerDocument.defaultView.getSelection().getRangeAt(0).cloneContents().querySelector('a');
  if (menu) {
    menu.addEventListener('click', () => {
      console.log('我是默认菜单项被修改的功能');
    });
  }
  // 添加自定义菜单项
  const newItem = document.createElement('div');
  newItem.textContent = '我是自定义菜单项';
  newItem.style.cssText = `
    position: absolute;
    top: ${event.clientY}px;
    left: ${event.clientX}px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
  `;
  document.body.appendChild(newItem);
});

1. 在事件处理函数中，使用 event 对象，获取当前鼠标点击的位置。
2. 使用 preventDefault 方法，阻止默认的右键菜单弹出。
3. 修改默认菜单项，如示例中所示，我们获取了用户选中的文本，并修改其中的超链接的点击事件。
4. 添加自定义菜单项，如示例中所示，我们创建了一个新的 div 元素，设置其样式和内容，将其添加到页面中。

以上就是使用 JavaScript 实现网页右键菜单栏功能的完整攻略。需要注意的是，不同浏览器的默认右键菜单项可能会有所不同，实际应用中需要针对不同的浏览器做相应的兼容处理。