下面是关于“原生js自定义右键菜单”的完整攻略。
什么是原生js自定义右键菜单
原生JS自定义右键菜单指的是使用原生的JavaScript代码实现自定义右键菜单的功能,不依赖任何第三方库和插件。我们可以通过监听浏览器的右键事件(contextmenu)来实现自定义右键菜单的功能,使用classList、innerHTML等DOM操作相关的API,来动态创建和修改HTML元素,从而达到自定义右键菜单的目的。
实现自定义右键菜单的步骤
- 监听contextmenu事件
要实现自定义右键菜单,需要先监听contextmenu事件,当用户右键点击浏览器页面时,触发该事件并展示自定义菜单。
document.addEventListener('contextmenu', function (event) {
event.preventDefault(); // 取消默认右键事件
// 在这里可以动态创建自定义菜单
});
- 动态创建自定义菜单
在监听到浏览器的右键事件时,需要通过JavaScript代码动态创建自定义菜单。一般来说,自定义菜单都是使用ul列表来实现,并利用CSS样式对其进行美化。利用innerHTML API可以很方便的插入HTML代码,使用样式控制CSS样式。
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建并插入自定义菜单
var menu = document.createElement('ul');
menu.classList.add('context-menu');
menu.innerHTML = `
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
`;
document.body.appendChild(menu);
});
- 控制菜单的位置和样式
动态创建出自定义菜单后,需要根据鼠标的位置来控制菜单的显示位置。利用getBoundingClientRect API可以获取元素在页面中的位置和大小信息。“提示:如果不加处理,当自定义菜单靠近页面边缘时,会出现遮盖的问题”。
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建并插入自定义菜单
var menu = document.createElement('ul');
menu.classList.add('context-menu');
menu.innerHTML = `
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
`;
document.body.appendChild(menu);
// 控制菜单的位置
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visibility = 'visible';
});
- 监听自定义菜单项的点击事件
当用户在自定义菜单上点击某个菜单项时,需要触发点击事件,并执行相关操作。可通过监听click事件来实现。
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建并插入自定义菜单
var menu = document.createElement('ul');
menu.classList.add('context-menu');
menu.innerHTML = `
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
`;
document.body.appendChild(menu);
// 控制菜单的位置
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visibility = 'visible';
// 监听自定义菜单项的点击事件
Array.from(menu.children).forEach(function (li) {
li.addEventListener('click', function () {
console.log('点击了:' + li.innerText);
// 这里可以执行一些操作
menu.style.visibility = 'hidden';
});
});
});
示例说明
- 示例一:右键菜单弹窗
针对网页中的某一个区域单独设置一个菜单,在菜单项中添加相应的功能。
var elem = document.getElementById('box');
elem.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建并插入自定义菜单
var menu = document.createElement('ul');
menu.classList.add('context-menu');
menu.innerHTML = `
<li>查看</li>
<li>修改</li>
<li>删除</li>
`;
document.body.appendChild(menu);
// 控制菜单的位置
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visibility = 'visible';
// 监听自定义菜单项的点击事件
Array.from(menu.children).forEach(function (li) {
li.addEventListener('click', function () {
console.log('点击了:' + li.innerText);
switch (li.innerText) {
case '查看':
alert('查看按钮点击');
break;
case '修改':
alert('修改按钮点击');
break;
case '删除':
alert('删除按钮点击');
break;
default:
break;
}
// 执行完相应操作后关闭右键菜单
menu.style.visibility = 'hidden';
});
});
});
- 示例二:全局右键菜单
在整个页面中添加一个公共的右键菜单,通过判断所选区域的不同,展示不同的菜单项。
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 创建并插入自定义菜单
var menu = document.createElement('ul');
menu.classList.add('context-menu');
if (event.target.tagName === 'INPUT') { // 输入框菜单
menu.innerHTML = `
<li>复制</li>
<li>剪切</li>
<li>粘贴</li>
`;
} else if (event.target.tagName === 'IMG') { // 图片菜单
menu.innerHTML = `
<li>另存为</li>
`;
} else { // 全局菜单
menu.innerHTML = `
<li>前进</li>
<li>后退</li>
<li>刷新</li>
`;
}
document.body.appendChild(menu);
// 控制菜单的位置
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visibility = 'visible';
// 监听自定义菜单项的点击事件
Array.from(menu.children).forEach(function (li) {
li.addEventListener('click', function () {
console.log('点击了:' + li.innerText);
// 这里可以执行一些操作
menu.style.visibility = 'hidden';
});
});
});
以上就是关于“原生js自定义右键菜单”的完整攻略,希望能对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js自定义右键菜单 - Python技术站