一个封装的contextmenu兼容FF(右键菜单)
<html>
<head>
<style type="text/css">
body
{
background-color: buttonface;
}
.contextmenu
{
width: 100px;
background-color: buttonface;
margin: 0;
padding: 1px;
border: 2px outset;
position: absolute;
z-index: 999;
}
.menuitem
{
cursor: default;
font: menu;
color: MenuText;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-disabled
{
cursor: default;
font: menu;
color: graytext;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-over
{
cursor: default;
background-color: highlight;
font: menu;
padding: 2px 16px 2px 16px;
color: highlighttext;
}
.menuitem-separator
{
margin: 0;
}
</style>
<script type="text/javascript">
//contextmenu object
//2007-7-3 by Simon.Q
//qq:173513656
function ContextMenu(sId)
{
this.MenuId = sId;
this.MenuItems = [];
}
//menu item object
function MenuItem(bType, sText, sAction, bEnable, sIcon)
{
this.type = bType;
this.text = sText;
this.action = sAction;
this.enable = (bEnable == undefined) ? true : false;
this.icon = sIcon;
}
//add menu item
ContextMenu.prototype.addMenuItem = function(sText, sAction, bEnable, sIcon)
{
this.MenuItems[this.MenuItems.length] = new MenuItem(true, sText, sAction, bEnable, sIcon);
}
//add separator
ContextMenu.prototype.addSeparator = function()
{
this.MenuItems[this.MenuItems.length] = new MenuItem(false, null, null, null, null);
}
//build menu item html
ContextMenu.prototype.addItem = function()
{
var sHtml = "";
for (var i = 0; i < this.MenuItems.length; i++)
{
if (this.MenuItems.type)
{
if (this.MenuItems.enable)
{
sHtml += "<div class=\"menuitem\" onmouseover=\"this.className = 'menuitem-over';\" onmouseout=\"this.className = 'menuitem';\""
if (this.MenuItems.action)
sHtml += " onclick=\""+ this.MenuItems.action +"\"";
sHtml += ">"+ this.MenuItems.text +"</div>\n";
}
else
{
sHtml += "<div class=\"menuitem-disabled\">"+ this.MenuItems.text +"</div>\n";
}
}
else
{
//sHtml += "<div class=\"menuitem-separator\"></div>\n";
sHtml += "<hr class=\"menuitem-separator\" />\n";
}
}
return sHtml;
}
//create contextmenu to string
ContextMenu.prototype.toString = function()
{
var sHtml = "<div id=\""+ this.MenuId +"\" class=\"contextmenu\" onselectstart=\"return false;\">\n";
sHtml += this.addItem();
sHtml += "</div>\n";
//alert(sHtml);
return sHtml;
}
//build contextmenu
ContextMenu.prototype.createMenu = function()
{
document.write(this);
this.hideMenu();
}
//show contextmenu
ContextMenu.prototype.showMenu = function(e)
{
var obj;
var e, x, y;
var docheight,docwidth,dh,dw;
e = e || window.event;
x = e.clientX;
y = e.clientY;
obj = document.getElementById(this.MenuId);
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
//alert(obj.offsetWidth);
dw = (obj.offsetWidth + x) - docwidth;
dh = (obj.offsetHeight + y) - docheight;
//alert(dw);
if(dw > 0)
{
obj.style.left = (x - dw) + document.body.scrollLeft + "px";
}
else
{
obj.style.left = x + document.body.scrollLeft + "px";
}
if(dh > 0)
{
obj.style.top = (y - dh) + document.body.scrollTop + "px"
}
else
{
obj.style.top = y + document.body.scrollTop + "px";
}
obj.style.visibility = "inherit";
}
//hide contextmenu
ContextMenu.prototype.hideMenu = function()
{
document.getElementById(this.MenuId).style.visibility = "hidden";
}
function GoTo()
{
alert("OK");
}
</script>
<script>
var cm = new ContextMenu("divContextMenu");
cm.addMenuItem("item1", "GoTo();");
cm.addSeparator();
cm.addMenuItem("item2", null, false);
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.createMenu();
</script>
</head>
<body oncontextmenu="return false;" onclick="cm.hideMenu();" oncontextmenu="cm.showMenu(event);return false;">
<div oncontextmenu="cm.showMenu(event);">contextMenu</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
<head>
<style type="text/css">
body
{
background-color: buttonface;
}
.contextmenu
{
width: 100px;
background-color: buttonface;
margin: 0;
padding: 1px;
border: 2px outset;
position: absolute;
z-index: 999;
}
.menuitem
{
cursor: default;
font: menu;
color: MenuText;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-disabled
{
cursor: default;
font: menu;
color: graytext;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-over
{
cursor: default;
background-color: highlight;
font: menu;
padding: 2px 16px 2px 16px;
color: highlighttext;
}
.menuitem-separator
{
margin: 0;
}
</style>
<script type="text/javascript">
//contextmenu object
//2007-7-3 by Simon.Q
//qq:173513656
function ContextMenu(sId)
{
this.MenuId = sId;
this.MenuItems = [];
}
//menu item object
function MenuItem(bType, sText, sAction, bEnable, sIcon)
{
this.type = bType;
this.text = sText;
this.action = sAction;
this.enable = (bEnable == undefined) ? true : false;
this.icon = sIcon;
}
//add menu item
ContextMenu.prototype.addMenuItem = function(sText, sAction, bEnable, sIcon)
{
this.MenuItems[this.MenuItems.length] = new MenuItem(true, sText, sAction, bEnable, sIcon);
}
//add separator
ContextMenu.prototype.addSeparator = function()
{
this.MenuItems[this.MenuItems.length] = new MenuItem(false, null, null, null, null);
}
//build menu item html
ContextMenu.prototype.addItem = function()
{
var sHtml = "";
for (var i = 0; i < this.MenuItems.length; i++)
{
if (this.MenuItems.type)
{
if (this.MenuItems.enable)
{
sHtml += "<div class=\"menuitem\" onmouseover=\"this.className = 'menuitem-over';\" onmouseout=\"this.className = 'menuitem';\""
if (this.MenuItems.action)
sHtml += " onclick=\""+ this.MenuItems.action +"\"";
sHtml += ">"+ this.MenuItems.text +"</div>\n";
}
else
{
sHtml += "<div class=\"menuitem-disabled\">"+ this.MenuItems.text +"</div>\n";
}
}
else
{
//sHtml += "<div class=\"menuitem-separator\"></div>\n";
sHtml += "<hr class=\"menuitem-separator\" />\n";
}
}
return sHtml;
}
//create contextmenu to string
ContextMenu.prototype.toString = function()
{
var sHtml = "<div id=\""+ this.MenuId +"\" class=\"contextmenu\" onselectstart=\"return false;\">\n";
sHtml += this.addItem();
sHtml += "</div>\n";
//alert(sHtml);
return sHtml;
}
//build contextmenu
ContextMenu.prototype.createMenu = function()
{
document.write(this);
this.hideMenu();
}
//show contextmenu
ContextMenu.prototype.showMenu = function(e)
{
var obj;
var e, x, y;
var docheight,docwidth,dh,dw;
e = e || window.event;
x = e.clientX;
y = e.clientY;
obj = document.getElementById(this.MenuId);
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
//alert(obj.offsetWidth);
dw = (obj.offsetWidth + x) - docwidth;
dh = (obj.offsetHeight + y) - docheight;
//alert(dw);
if(dw > 0)
{
obj.style.left = (x - dw) + document.body.scrollLeft + "px";
}
else
{
obj.style.left = x + document.body.scrollLeft + "px";
}
if(dh > 0)
{
obj.style.top = (y - dh) + document.body.scrollTop + "px"
}
else
{
obj.style.top = y + document.body.scrollTop + "px";
}
obj.style.visibility = "inherit";
}
//hide contextmenu
ContextMenu.prototype.hideMenu = function()
{
document.getElementById(this.MenuId).style.visibility = "hidden";
}
function GoTo()
{
alert("OK");
}
</script>
<script>
var cm = new ContextMenu("divContextMenu");
cm.addMenuItem("item1", "GoTo();");
cm.addSeparator();
cm.addMenuItem("item2", null, false);
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.createMenu();
</script>
</head>
<body oncontextmenu="return false;" onclick="cm.hideMenu();" oncontextmenu="cm.showMenu(event);return false;">
<div oncontextmenu="cm.showMenu(event);">contextMenu</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端