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. GitHub 小试

    GitHub是什么? 它是用来进行版本控制的,就是用来保存项目的地方. 但是项目要是运行,还是需要你本地的环境,它只不过是用来保存代码罢了. GitHub如何操作? 可以通过客户端进行代码提交,更新. ...

  2. 【转】IOS缓存机制详解

    人魔七七:http://www.cnblogs.com/qiqibo/ 为什么要有缓存 应用需要离线工作的主要原因就是改善应用所表现出的性能.将应用内容缓存起来就可以支持离线.我们可以用两种不同的缓存 ...

  3. rhel6.4 using centos source

    rhel 默认的 yum 依赖于 rhn,要注册收费才能 update,改用 centos 的源: rpm -e yum* --nodeps rpm -qa | grep yum | xargs rp ...

  4. Edwin windows下基本命令：

    Ctrl-Alt-z: 对区域内所有代码求值. Ctrl-x Ctrl-e: 对光标左边或上一个表达式求值. Ctrl-c Ctrl-x: 中断当前求值. Ctrl-a: 移动到行首. Ctrl-e: ...

  5. C#Dictionary 实例

    Dictionary<int, string> dc = new Dictionary<int, string>(); dc.Add(, "看了"); dc ...

  6. poj1127 Jack Straws(线段相交+并查集)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Jack Straws Time Limit: 1000MS   Memory L ...

  7. css3之background

    background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...

  8. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  9. 转载：css3 box-shadow投影发光效果

    转载网址:http://www.wufangbo.com/css3-box-shadow/ CSS3的box-shadow属性 可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. bo ...

  10. bootstrap 模版

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...