一个轻量级的XHTML右键菜单[支持IE和firefox]

更新时间：2007年01月29日 00:00:00 作者：

目前很多在网络上流传的右键菜单都不支持XHTML，主要就是因为document.body和document.documentElement之间的不同造成的
还有一个就是很多右键菜单程序太大，于是自己写了一个迷你型的右键菜单，支持IE和firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>adad</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#rightMenu{
 padding:2px;
 background-color:menu;
 cursor:default;
 position:absolute;
 z-index:900;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 font-size:14px;
 word-break:keep-all;
}
.menuItem{
 display:block;
 padding:3px;
}
</style>
<script>
/**
 *JRightMenu类，在浏览器里显示用户定制右键菜单
 *[注意]：只适用于XHTML
 *@author brull
 *@email brull@163.com
 *@date 2007-01-24
 */
/**
 *@param menuItem 菜单显示内容，是一个数组
 *@param handle 对应menuItem菜单的处理js代码段，同样是个数组
 */
JRightMenu=function (menuItem,handle){
 var rightMenu=document.createElement("div");
 var menuInnerHTML="";//菜单容器里的HTML内容
 var $items=this.menuItem=menuItem;
 var $handle=this.handle=handle;
 rightMenu.id="rightMenu";//id
 for(var i in $items){
 if($items[i].indexOf("<hr")!=-1)
 menuInnerHTML+=$items[i];
 else
 menuInnerHTML+=""
 +$items[i]
 +"";
 }
 rightMenu.innerHTML=menuInnerHTML;
 rightMenu.style.visibility = "visible";
 rightMenu.onmousedown=function(e){
 e=e||window.event;
 document.all?e.cancelBubble=true:e.stopPropagation();
 }
 rightMenu.onselectstart=function(){
 return false;
 }
 document.body.appendChild(rightMenu);
 this.menu=rightMenu;//方便别的方法引用
};
JRightMenu.prototype.show=function(e){
 e=e||window.event;
 var root=document.documentElement;
 var x = root.scrollLeft+e.clientX;//菜单左上角横坐标
 var y = root.scrollTop+e.clientY;//菜单左上角纵坐标
 if (this.menu.clientWidth+e.clientX > root.clientWidth){
 x=x-this.menu.clientWidth;
 }
 if (this.menu.clientHeight+e.clientY > root.clientHeight){
 y=y-this.menu.clientHeight;
 }
 this.menu.style.left = x+"px"; 
 this.menu.style.top = y+"px"; 
 this.menu.style.visibility = "visible";
 return false;
}
JRightMenu.prototype.hidden=function() { 
 this.menu.style.visibility = "hidden";
}
</script>
<script>
window.onload=function(){
rightMenu=new JRightMenu(["it’s mine!","it’s yours!"],["alert(’it is mine!’)","alert(’it is yours!’)"]);
}
document.oncontextmenu=function(evt){return rightMenu.show(evt);};
document.onclick=function(){rightMenu.hidden();}
</script>
</head>
<body>
adadad大王大王
adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王
awdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</body>
</html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

一个轻量级的XHTML右键菜单[支持IE和firefox]

JavaScript判断对象、数组是否包含某个属性、某个值的方法
这篇文章主要给大家介绍了关于JavaScript判断对象、数组是否包含某个属性、某个值的相关资料,我们在实际的开发过程中,经常需要判断对象/数组是否包含某个属性或者某个值,需要的朋友可以参考下
2023-09-09
详解redux异步操作实践
这篇文章主要介绍了详解redux异步操作实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
NW.js 简介与使用方法
NW.js （原名 node-webkit）是一个基于 Chromium 和 node.js 的应用运行时，通过它可以用 HTML 和 JavaScript 编写原生应用程序.这篇文章主要介绍了NW.js 简介与使用,需要的朋友可以参考下
2018-02-02
Canvas实现动态粒子文字效果的代码示例
这篇文章主要介绍了如何用Canvas实现动态粒子文字效果,文中有完整的代码示例,文章通过代码介绍的非常清楚,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08
js定时器出现第一次延迟的原因及解决方法
在本篇文章里小编给大家整理的是一篇关于js定时器出现第一次延迟的原因及解决方法，对此有需要的朋友们可以学习下。
2021-01-01
event.X和event.clientX的区别分析
解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
2011-10-10
javascript重写alert方法的实例代码
最近因为在flash项目中遇到as调用js函数马上弹出alert，在火狐浏览器下会卡死浏览器。介于这样我们重写alert，让alert弹出一个自定义的div弹层，来实现提示效果！
2013-03-03
js 原型对象和原型链理解
本文主要介绍了js原型对象和原型链的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
js 操作css实现代码
虽说jquery支持css选择器，可以把一些css规则放在js里，js无论如何是比css灵活的。但是js修改的是dom的htmlelement的stlye，是一个操作而非规则。
2009-06-06
一文带你彻底搞懂JS大文件分片上传的实现
这篇文章主要为大家详细介绍了前端JavaScript是如何实现大文件分片上传的，文中的示例代码讲解详细，具有一定的学习价值，需要的可以参考一下
2023-05-05

一个轻量级的XHTML右键菜单[支持IE和firefox]

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具