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. Gson序列化对象时排除字段

    import com.google.gson.ExclusionStrategy; import com.google.gson.FieldAttributes; /** *Gson序列化对象排除属性 ...

  2. Java基础知识强化37：StringBuffer类之StringBuffer的构造方法

    1. StringBuffer的构造方法: (1)StringBuffer(): (2)StringBuffer(CharSequence seq): (3)StringBuffer(int capa ...

  3. sed删除空行和注释行

    最近在看前辈们写的代码,他们把没有用的代码是注释掉而不是删掉.没用的代码和注释很乱,看着心烦,就把注释删掉来解读,顿时爽快多了. 不多说了,直接举例子 比如一个文本文件 data 里的内弄为 cat ...

  4. CSS Hack是什么意思

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...

  5. git开源项目协作

    开源项目协作 fork开源项目,即打开开源项目的github,然后点击fork按钮 pull request

  6. 2:numpy---ndarray

    ndarray即是多维数组[n dimension array] 一:创建ndarray 有好几种创建数组的方法. 例如,你可以使用 array 函数从常规的Python列表和元组创造数组.所创建的数 ...

  7. 页面传值中get和post区别

    get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应. post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到 ...

  8. Asp.Net--主题/皮肤文件

    主题 是皮肤的集合.皮肤描述了控件应该如何显示,它可以定义样式的属性,图片,颜色等. 如果拥有多个主题,用户可以根据需要选择主题来显示站点,这只需要通过点击按钮,从一个皮肤切换到另一个皮肤. 皮肤文件 ...

  9. 获取GET/POST提交的数据，并处理中文问题

    1.获取input标签中的值,用request.getParameter("User")(User为input的name值) 2. 获取checkbox的值,由于是多选的,所以不能 ...

  10. LIS n*log(n)的理解

    很多时候lis 用二分的方法比较方便 这里写一下他的原理 这里仅对严格的最长上升子序列做讨论 这里有两个数列  一个数列是 原串的数列 a1-an  另一个数列是最长上升子序列辅助数列 s数列的长度为 ...