简单的自定义鼠标右键菜单

Window95 在PC中引入上下文菜单的概念,即通过鼠标右键调出上下文菜单,不久之后这个概念也被引入web中。

接下来我们来学习一下如何js自定义鼠标右键的菜单。  1 <!DOCTYPE html>

  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>contextmenu</title>
  6 </head>
  7 <body>
  8 //定义一个div,此处为操作方法的解释
  9   <div id="myDiv">Right click or ctrl + right me to get a custom context menu.
 10   Click anywhere to get the default context menu.</div>
 11 //此处是菜单,但是已通过css样式中的visibility隐藏
 12   <ul id="myMenu" style="position:absolute; visibility:hidden; background-color:silver; list-style:none;">
 13       <li><a href="http://www.nczline.net" target="_blank">Nicholas‘ site</a></li>
 14       <li><a href="http://www.wrox.com" target="_blank">Wrox site</a></li>
 15       <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
 16   </ul>
 17    <script>
 18 //通过这个类来兼容各种浏览器
 19         var EventUtil = {
 20             addHandler: function (element, type, handler) {
 21                 if (element.addEventListener) {
 22                     element.addEventListener(type, handler, false);
 23                 } else if (element.attachEvent) {
 24                     element.attachEvent("on" + type, handler);
 25                 } else {
 26                     element["on" + type] = handler;
 27                 }
 28             },
 29             getEvent: function (event) {
 30                 return event ? event : window.event;
 31             },
 32             getTarget: function (event) {
 33                 return event.target || event.srcElement;
 34             },
 35
 36             removeEventListener: function (element, type, handler) {
 37                 if (element.removeEventListener) {
 38                     element.removeEventListener(type, handler, false);
 39                 } else if (element.detachEvent) {
 40                     element.detachEvent("on" + type, handler);
 41                 } else {
 42                     element["on" + type] = null;
 43                 }
 44             },
 45             stopPropagation: function (event) {
 46                 if (event.stopPropagation) {
 47                     event.stopPropagation();
 48                 } else {
 49                     event.cancelBubble = true;
 50                 }
 51             },
 52
 53             preventDefault: function (event) {
 54                 if (event.preventDefault) {
 55                     event.preventDefault();
 56                 } else {
 57                     event.returnValue = false;
 58                 }
 59
 60             },
 61             getRelatedTarget: function (event) {
 62                 if (event.relatedTarget) {
 63                     return event.relatedTarget;
 64                 } else if (event.toElement) {
 65                     return event.toElement;
 66                 } else if (event.fromElement) {
 67                     return event.fromElement;
 68                 } else {
 69                     return null;
 70                 }
 71
 72             }
 73
 74         };
 75     //为整个窗口添加onload事件
 76        EventUtil.addHandler(window,"load",function(event){
 77         var div = document.getElementById("myDiv");
 78          // 为div添加oncontextmenu事件
 79            EventUtil.addHandler(div,"contextmenu",function(event){
 80             //通过EventUtil获取事件
 81             event = EventUtil.getEvent(event);
 82               //传入事件event,禁止默认动作,即不显示浏览器默认的上下文菜单
 83                EventUtil.preventDefault(event);
 84
 85                 //获取菜单
 86                var menu = document.getElementById("myMenu");
 87                menu.style.left = event.clientX + "px";  //设置位置
 88                menu.style.top = event.clientY + "px";
 89                menu.style.visibility = "Visible";       //设置属性,使其可见
 90
 91            });
 92            // 为窗口添加一个单击事件,使得单击之后上下文菜单消失
 93            EventUtil.addHandler(document,"click",function(event){
 94             document.getElementById("myMenu").style.visibility="hidden";
 95
 96            });
 97
 98        });
 99
100    </script>
101
102 </body>
103 </html>

虽然这个例子很简单,但它展示了web上所有自定义上下文菜单的基本结构。只需为这个例子中支持的上下文菜单添加一些css样式,就可以达到非常棒的效果。

转载请说明出处:http://www.cnblogs.com/kerita

时间: 2024-05-29 16:45:15

简单的自定义鼠标右键菜单的相关文章

JavaScript特效——自定义鼠标右键菜单

HTML 1 .menu{ 2 position:absolute; 3 width:200px; 4 background:#eee; 5 border:1px solid #ddd; 6 box-shadow:2px 2px 2px 2px #999; 7 display: none; 8 } 9 ul{ 10 padding:0; 11 margin:0; 12 list-style-type:none; 13 } 14 ul li a{ 15 padding:5px 10px; 16 d

javascript 自定义鼠标右键菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-color:ghostwhite; margin: 0; padding:

JavaScript 自定义html元素鼠标右键菜单

自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 编码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){ var menu = document.

自定义菜单鼠标右键菜单打开选项

//将你想要添加到鼠标邮件的应用添加进来., 自动为Notepad增加鼠标右键菜单的打开选项 将下面的内容保存到bat批处理文件,然后将文件放到Notepad++.exe所在目录,双击运行即可. 文件内容: @echo off TITLE 自动为Notepad增加鼠标右键菜单的打开选项 cls color 0B echo 可按需要修改执行文件变量即可,目录路径会自动获取 echo 自动生卸载文件,方便不用的时候可以清除加入的注册表内容 ping 127.1 -n 3 >nul rem TheEx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

OpenLayers 3 之 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

js实现自定义鼠标右键-------Day45

又是周末了,不过其实这在国外应该算是一周的开始吧,不管怎么说,今天是在休息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛所有的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把媳妇儿给吓坏了,实在不知道科比是每天怎么看到那凌晨四点钟的太阳的,这体质没法说了,而有一点却是不得不说,这身体真的才是一切的根本,友情建议各位朋友还是好好锻炼身体,我也要好好锻炼身体. 回顾这一周,项目组长的一句话给我很大的触动,原话我记不得怎么说了,大抵意思是说:不论你会多少,你终究要用上了才是你的

JS捕获鼠标右键菜单中的粘贴时间

常用的Ctrl+V按键的监听: 1 $(document).keydown(function(e){ 2 if( e.ctrlKey == true && e.keyCode == 86 ){ 3 console.log('Ctrl+V'); 4 return false; 5 } 6 }); 而对于鼠标右键菜单的粘贴: 1 $("#input").bind('paste', function(e) { 2 var el = $(this); 3 setTimeout(

向鼠标右键菜单增加菜单项

下了个别人集成好各种插件的Sublime Text 3编辑器,由于没有右键菜单“Edit with Sublime_text”感觉很不方便,就上网百度了下,把方面记录下!~ REGEDIT4 [HKEY_CLASSES_ROOT\*\Shell\Edit with Sublime_text] [HKEY_CLASSES_ROOT\*\Shell\Edit with Sublime_text\Command] @="E:\\Sublime Text 3\\sublime_text.exe \&qu