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. C# List 泛型用法

    List 类是 ArrayList 类的泛型等效类,某些情况下,用它比用数组和 ArrayList 都方便. 我们假设有一组数据,其中每一项数据都是一个结构. public struct Item{  ...

  2. overcast

    关于一个利用relative的简单布局,firefox上出现一点问题,暂且不明原因 firefox的 chrome的 代码记录 <!DOCTYPE html> <html lang= ...

  3. （转）js学习笔记（）函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  4. EasyUI中使用Uploadity问题

    <div id="UploadPage" class="easyui-layout" fit="true"> <div r ...

  5. MySql用statement实现DDL,DML,DQL的操作Demo

    Demo1 Connection connection=null; Statement stmt=null; int result=-1; try { Class.forName("com. ...

  6. 一些小trick~

    做质因子分解的时候将先打素数表会节省很多时间

  7. OpenGL ES 2.0 顶点着色器的妙用

    1.飘扬的旗帜(水面起伏) 基本原理 绘制一帧画面时由顶点着色器根据一定的规则变换各个顶点的位置,即可得到旗帜迎风飘扬的效果. 为了使旗帜的飘动过程比较平滑,采用基于正弦曲线的顶点位置变换规则.

  8. web标准(复习)--1

    XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...

  9. php 如何写入、读取word，excel文档

    如何在php写入.读取word文档 <? //如何在php写入.读取word文档 // 建立一个指向新COM组件的索引 $word = new COM("word.applicatio ...

  10. C语言初学 使用while语句统计输入字符个数

    #include<stdio.h> main() { int n=0; printf("输入任意个数的字符:\n"); while(getchar()!='\n')n+ ...