JavaScript自定义鼠标右键菜单栏-前端开发

下面我将为大家讲解 JavaScript 自定义鼠标右键菜单栏的完整攻略。

下面我将为大家讲解 JavaScript 自定义鼠标右键菜单栏的完整攻略。

实现思路

实现 JavaScript 自定义鼠标右键菜单栏的基本思路如下：

监听右键菜单事件，捕获鼠标点击坐标；
动态创建 <div> 元素，设置其样式、定位，同时设置 display:none 隐藏起来；
将该 <div> 元素添加到 <body> 元素中；
再次监听右键菜单事件，根据鼠标点击的坐标，在 <div> 元素中生成菜单项；
监听菜单项的点击事件，执行相应的操作。

代码实现

下面是 JavaScript 自定义鼠标右键菜单栏的一段简单实现示例：

let menuDiv = document.createElement('div');
menuDiv.innerHTML = '<ul><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul>';
menuDiv.style.display = 'none';
menuDiv.style.position = 'absolute';
menuDiv.style.backgroundColor = '#fff';
menuDiv.style.width = '100px';
menuDiv.style.border = '1px solid #ccc';

document.body.appendChild(menuDiv);

// 右键菜单事件
document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menuDiv.style.display = 'block';
  menuDiv.style.left = e.clientX + 'px';
  menuDiv.style.top = e.clientY + 'px';
});

// 菜单项点击事件
menuDiv.addEventListener('click', function (e) {
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    console.log(e.target.innerHTML);
  }
  menuDiv.style.display = 'none';
});

在这段代码中，首先创建一个 <div> 元素，用于存放右键菜单栏的内容。在右键菜单事件中，指定该 <div> 的位置，并显示出来。在菜单项点击事件中，判断点击的是哪个菜单项，并执行相应的操作，同时隐藏该菜单栏。

示例说明

下面给出一个带有子菜单的完整示例：

let contextMenu = {
  '菜单项1': function () { console.log('菜单项1') },
  '菜单项2': function () { console.log('菜单项2') },
  '菜单项3': {
    '菜单项3-1': function () { console.log('菜单项3-1') },
    '菜单项3-2': function () { console.log('菜单项3-2') },
    '菜单项3-3': {
      '菜单项3-3-1': function () { console.log('菜单项3-3-1') },
      '菜单项3-3-2': function () { console.log('菜单项3-3-2') }
    }
  }
};

function createContextMenu(data) {
  let menuDiv = document.createElement('div');
  let menuHtml = '';
  for (let key in data) {
    if (typeof data[key] === 'function') {
      menuHtml += '<li>' + key + '</li>'
    } else if (typeof data[key] === 'object') {
      menuHtml += '<li>' + key + createContextMenu(data[key]) + '</li>'
    }
  }
  menuDiv.innerHTML = '<ul>' + menuHtml + '</ul>';
  menuDiv.style.display = 'none';
  menuDiv.style.position = 'absolute';
  menuDiv.style.backgroundColor = '#fff';
  menuDiv.style.width = '150px';
  menuDiv.style.border = '1px solid #ccc';
  return menuDiv.outerHTML;
}

document.body.innerHTML += createContextMenu(contextMenu);

let menuDiv = document.querySelector('#menu');

// 右键菜单事件
document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    return;
  }
  menuDiv.style.display = 'block';
  menuDiv.innerHTML = createContextMenu(contextMenu);
  menuDiv.style.left = e.clientX + 'px';
  menuDiv.style.top = e.clientY + 'px';
});

// 菜单项点击事件
menuDiv.addEventListener('click', function (e) {
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    let key = e.target.innerText;
    if (typeof contextMenu[key] === 'function') {
      contextMenu[key]();
      menuDiv.style.display = 'none';
    } else if (typeof contextMenu[key] === 'object') {
      menuDiv.innerHTML = createContextMenu(contextMenu[key]);
    }
  }
});

这个示例中，定义了一个 contextMenu 对象，用于描述右键菜单栏的内容，包括三个菜单项，其中第三个菜单项还包含两个子菜单。使用 createContextMenu() 函数动态生成菜单栏的 HTML 代码，然后将其插入到 <body> 元素中。右键菜单事件触发后，根据鼠标点击的位置动态调整菜单栏的内容和位置。菜单项点击事件触发后，根据点击的菜单项执行相应的操作或显示子菜单。

实现思路

代码实现

示例说明

基础教程推荐