<%--
/**
*实现右键菜单功能
*/
--%>
<html>
<body oncontextmenu = showMenu('')>
<form name = "menuForm">
<!--隐藏框，用来保存选择的菜单的id值-->
<input type = "hidden" name = "id" value = "">
<table>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('0')>根目录</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('1')>菜单一</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('2')>菜单二</a></td></tr>
</table>
</form>
</body>
<!-- 这里用来定义需要显示的右键菜单 -->
<div id="itemMenu" style="display:none">
<table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0">
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.create()">
新增
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.update();">
修改
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.del()">
删除
</td>
</tr>
</table>
</div>
<!-- 右键菜单结束-->
</html>
<script language="JavaScript">
/**
*根据传入的id显示右键菜单
*/
function showMenu(id)
{
menuForm.id.value = id;
if("" == id)
{
popMenu(itemMenu,100,"100");
}
else
{
popMenu(itemMenu,100,"111");
}
event.returnValue=false;
event.cancelBubble=true;
return false;
}
/**
*显示弹出菜单
*menuDiv:右键菜单的内容
*width:行显示的宽度
*rowControlString:行控制字符串，0表示不显示，1表示显示，如“101”，则表示第1、3行显示，第2行不显示
*/
function popMenu(menuDiv,width,rowControlString)
{
//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs[i].style.display=(hide)?"none":"";
//设置鼠标滑入该行时的效果
rowObjs[i].cells[0].onmouseover=function()
{
this.style.background="#818181";
this.style.color="white";
}
//设置鼠标滑出该行时的效果
rowObjs[i].cells[0].onmouseout=function(){
this.style.background="#cccccc";
this.style.color="black";
}
}
//屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
}
//选择右键菜单的一项后，菜单隐藏
pop.document.onclick=function()
{
pop.hide();
}
//显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;
}
function create()
{
alert("create" + menuForm.id.value + "!");
}
function update()
{
alert("update" + menuForm.id.value + "!");
}
function del()
{
alert("delete" + menuForm.id.value + "!");
}
function clickMenu()
{
alert("you click a menu!");
}
</script>
分享到：
相关推荐
网页鼠标右键被禁用的解决办法 在日常浏览网页时，我们可能会遇到一些网页禁用了鼠标右键的情况，这可能是由于网页开发者为了保护网站内容或防止用户复制内容而进行的设置。然而，这种设置可能会给用户带来不便。...
4. **绑定菜单项事件**：为每个菜单项添加点击事件监听器，根据用户的选择执行相应的操作，比如切换图表类型、刷新数据等。 ```javascript var menuItem = document.createElement('div'); menuItem.textContent = ...
9. **鼠标右键菜单定制**：编辑器允许用户自定义右键菜单，将常用功能添加进去，使得操作更加便捷。 10. **HTML和CSS预览**：内置浏览器预览功能，实时查看HTML和CSS的效果，便于前端开发。 EditPlus 3的绿色版本...
标题 "鼠标右键在网页上不能用" 描述了一个常见的技术问题，这通常是由于网页开发者为了防止用户复制或右键菜单被禁用的情况。这个问题涉及到Web浏览器的工作原理、JavaScript编程以及可能的解决策略。 首先，我们...
多级导航意味着菜单项会根据用户的鼠标悬停展开下一级菜单，这通常通过CSS的display属性来控制，通过JavaScript响应鼠标事件来切换显示状态。 JavaScript，尤其是jQuery库，主要负责处理交互逻辑。当用户右键点击时...
在本文中，我们将深入探讨如何使用ECharts，一个流行的JavaScript数据可视化库，来实现鼠标右键功能以及通过键盘控制ECharts中的标记线（markLine）和标记点（marker）。ECharts提供了一套丰富的API和交互功能，使得...
标题与描述均提到了“JS网页屏蔽右键代码”，这主要涉及到的是JavaScript在网页开发中的应用，特别是如何通过JavaScript阻止用户在网页上进行右键点击、复制、粘贴等操作，以此来保护网页内容不被轻易复制或查看源...
`jQuery.contextmenu`是jQuery的一个插件，用于实现鼠标右键点击时弹出自定义菜单的功能。这个功能在许多网站上都有应用，比如在编辑器中，用户可以通过右键菜单选择复制、粘贴、撤销等操作。 `jQuery.contextmenu`...
例如，标题和描述中提到的“屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键”，这些都是常见的用户交互功能，但它们可以被编程方式阻止，以实现特定的功能限制或用户体验定制。下面将详细介绍这些...
实现选项卡新增以及切换、选项卡刷新、选项卡删除（删除其他、删除右侧所有、删除所有）。如有需要可留下邮箱，我给你私发。 参考博文：https://blog.csdn.net/hon_vin/article/details/101676162
右键菜单则是用户在鼠标右键点击时出现的上下文相关操作选项，增强了用户体验。在这个主题中，我们将深入探讨如何使用JavaScript实现树形菜单与右键菜单的结合。 首先，创建树形菜单的基础是利用HTML来定义节点结构...
"JavaScript 左右切换鼠标可控的无缝图片滚动代码"正是这种效果的实现方式。 在该压缩包中，包含了一个实现此功能的JavaScript代码示例。这个功能的核心是通过监听鼠标的左右键点击事件，来控制图片的前后滚动。当...
右键菜单是用户交互的一种扩展形式，当用户在特定元素上点击鼠标右键时，会弹出一个包含多种操作选项的菜单，这种设计可以提供额外的功能而不占据屏幕空间。 实现这个功能的关键步骤包括： 1. **创建TabPanel**：...
禁止鼠标右键 禁止鼠标右键点击是常见的保护措施之一。通过在HTML元素上设置`oncontextmenu`事件，可以阻止浏览器默认的行为（即弹出右键菜单）。 ```html ;"> ``` 或者在具体的元素上添加此属性： ```html ;"> ...
3. 键盘导航支持：除了鼠标，也应支持键盘操作，如Tab键切换焦点，Enter键执行选中项的操作。 4. 事件委托：对于动态生成的菜单项，使用事件委托可以提高性能并减少事件监听器的数量。 总结来说，"jQuery右键点击...
总结来说，OpenLayers右键菜单是通过自定义事件监听、HTML/CSS布局和JavaScript事件处理来实现的。这个“不错的demo”为我们提供了一个很好的起点，让我们能够为OpenLayers地图增加更多交互性，提升用户体验。通过...
这个程序可能是为了实现用户通过简单的操作，就能快速地在鼠标左键和右键的功能之间切换，这对于某些特定的使用场景或者辅助工具来说是非常有用的。 首先，我们要理解“源代码”是什么。源代码是程序员用编程语言...
在开发者工具中，我们可以切换到“元素”面板，选中网页的任一元素，此时在页面上点击鼠标右键将禁用网页原有的右键菜单，从而可以执行原本被限制的操作。 2. **禁用JavaScript**：许多网页右键限制是通过...