下面我将为大家讲解 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>
元素中。右键菜单事件触发后,根据鼠标点击的位置动态调整菜单栏的内容和位置。菜单项点击事件触发后,根据点击的菜单项执行相应的操作或显示子菜单。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript自定义鼠标右键菜单栏 - Python技术站