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. [Polymer] Custom Elements: Styling

    Code: <dom-module id="business-card"> <template> <div class="card" ...

  2. Java多线程练习

    国际惯例,先贴出代码 package jiankong; import java.util.Date; public class jiankong { public static void main( ...

  3. 在C#、Java中，为什么不能用[返回值]区别重载方法？

    为什么方法签名只包含方法名和参数列表,而没有把返回值考虑进去? 如下有两个方法: void Func(){} string Func() { return string.Empty; } 编辑器可以根 ...

  4. Jquery JSOPN在WebApi中的问题

    1. 客户端代码: $.ajax({ data: { name: 'zhangsan' }, url: apiUrl.getTwo('TestFourth'), dataType: 'jsonp', ...

  5. Oracle物理结构与逻辑结构

    有一张图能非常清晰的表示出Oracle物理结构与逻辑结构的区别:如下图:   对上图的解释:每个数据库都必须由一个或多个表空间组成.(一对多关系)每个表空间都必须由一个或多个数据文件(data fil ...

  6. uva 10994 - Simple Addition

    //组合数学 //计算sum{i从右往左数的第一个非0数字,p<=i<=q}. #include <cstdio> typedef long long ll; ll sum(l ...

  7. IOS添加自定义字体库

    1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...

  8. js学习笔记——数组方法

    join() 把数组中所有元素转化为字符串并连接起来,并返回该字符串, var arr=[1,2,3]; var str=arr.join("#"); //str="1# ...

  9. Apache主站点配置

    Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. Apache主站点基本配置:ServerRoot "/mnt/software/a ...

  10. js定时跳转

    在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...