javascript自定义浏览器右键菜单

 

在书上看到document对象还有一个contextmenu事件，但是不知为什么w3school中找不到这个耶。。。

利用这个特性写了个浏览器的右键菜单，感觉挺不错，呵呵。。。

HTML部分(在<body></body>之间插入以下HTML)：

查看代码

<div id="menu">

    <ul>

        <li><a href="#">contextmenuitem 1</a></li>

        <li><a href="#">contextmenuitem 2</a></li>

        <li><a href="#">contextmenuitem 3</a></li>

        <li><a href="#">contextmenuitem 4</a></li>

        <li><a href="#">contextmenuitem 5</a></li>

        <li><a href="#">contextmenuitem 6</a></li>

    </ul>

</div>

CSS部分：

查看代码

<style type="text/css">

*{margin:;padding:;}

#menu{position:absolute;width:150px;visibility:hidden;border:1px solid #666;border-bottom-width:;}

#menu li{list-style:none;text-indent:1em;}

#menu li a{display:block;height:30px;line-height:30px;border-bottom:1px solid #666;text-decoration:none;color:#666;font:12px/30px tahoma;}

#menu li a:hover{background:#eee;color:black;}

</style>

JavaScript部分：

查看代码

<script type="text/javascript">

document.oncontextmenu = function(e){

 if(window.event) e = window.event;

 var mymenu = document.getElementById("menu");

 mymenu.style.visibility = "visible";

 mymenu.style.left = e.clientX + 5 +"px";

 mymenu.style.top = e.clientY + 5 + "px";

 return false;

}

document.onclick = function(){

 var mymenu = document.getElementById("menu");

 mymenu.style.visibility = "hidden";

}

</script>

原理：

1.利用document.oncontextmenu将浏览器的右键菜单屏蔽(return false)。

2.在CSS中将div的visibility设置为hidden，即先把它给隐藏掉，position为absolute绝对定位，这样我们就能很容易地控制left与top的值的了。

3.在函数中获取menu为mymenu，visibility为可见(visible)，再设置left与top和分别等于浏览器窗口的x,y坐标，最后再写一个document.onclick函数，只要点击，就将div的可见设置为(隐藏)hidden;

我分别测试了几款浏览器，兼容性还好吧，下面是chrome效果图：

javascript自定义浏览器右键菜单的更多相关文章

  1. JavaScript自定义鼠标右键菜单

    下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...

  2. javascript 自定义鼠标右键菜单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. html鼠标自定义右键菜单：css+js实现自定义html右键菜单

    我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...

  4. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. javascript屏蔽浏览器右键功能按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jq自定义鼠标右键菜单

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback

    首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...

  9. IE浏览器右键菜单插件开发（上篇）——自定义一个IE右键菜单项

    要做一个IE右键浏览器插件,得3步走. 第一,在IE右键菜单上添加自定义菜单名称,是通过注册表实现的,如下: string regkey = @"Software\Microsoft\Int ...

随机推荐

  1. Quartz中时间表达式的设置-----corn表达式

    Quartz中时间表达式的设置-----corn表达式 时间格式: <!-- s m h d m w(?) y(?) -->,   分别相应: 秒>分>小时>日>月 ...

  2. 《Linux Device Drivers》第十二章 PCI司机——note

    一个简短的引论 它给这一章总线架构的高级概述 集中访问讨论Peripheral Component Interconnect(PCI,外围组件互连)外设内核函数 PCI公交车是最好的支持的内核总线 本 ...

  3. linux生成随机密码

    通常情况下大家生成密码都好困惑,一来复杂程度不够会不安全,复杂程度够了又不能手动随便敲击键盘打出一同字符(但通常情况下这些字符是有规律的), 使用1password 或者 keepass 这种软件生成 ...

  4. IIS7 常用模块介绍说明

    1.1.0   IIS常用的功能模块介绍: 1)         静态内容:可发布静态 Web 文件格式,比如 HTML 页面和图像文件. 2)         默认文档:允许您配置当用户未在 URL ...

  5. 自定义控件 环形进度条 ProgressBar

    使用 public class MainActivity extends Activity implements OnComompleteListener {     private int num  ...

  6. 关于获得本机Mac Address的方法

    网络上有讲获得Mac address的方法有如下: 1. 发送ARP命令,利用返回的Mac Address缓冲区得到 2. 用NetworkInterface.GetAllNetworkInterfa ...

  7. C# XML流操作简单实例

    这里我们先介绍操作XML文件的两个对象:XmlTextReader和XmlTextWriter打开和读取Xml文件使用到的对象就是XmlTextReader对象.下面的例子打开了与程序在同一路径下的一 ...

  8. ResourceDictionary 和 XAML 资源引用

    XAML 定义应用的 UI,并且 XAML 也可以定义 XAML 中的资源.资源通常是对你希望多次使用的某些对象的定义.你要为 XAML 资源定义一个键,以供将来引用,该键的作用类似于资源的名称.你可 ...

  9. arcmap从excel坐标数据生成点shp文件

    概述 今天试图在ArcMap中将excel数据转成点文件,在"Display XY Data"的时候,无法选择X,Y字段,很是纳闷,原来Excel中列的格式是文本,导致无法选择.有 ...

  10. js引用类型姿势

    栈 1)var a=new Array(),a.push(a,b,...),a.pop() queue 1)var a=new Array(), a.push(a,b,...),a.shift() a ...