对任意元素,自定义右键菜单
2013-02-11 18:22
447 查看
[转]http://www.cnblogs.com/slowsoul/archive/2013/02/10/2909820.html
一、一些概念:
1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。
BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。
2、事件onmousedown:表示鼠标按键按下的动作。
事件oncontextmenu:点击鼠标触发的另一个事件。
3、中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用prevemtDefault()方法。
4、事件对象:①在IE中,事件对象是window对象的一个event属性。
声明:
②在标准DOM中,事件对象是事件处理函数的唯一参数。
声明:
解决兼容性:
二、实现:
HTML:
javascript:
一、一些概念:
1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。
BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。
2、事件onmousedown:表示鼠标按键按下的动作。
事件oncontextmenu:点击鼠标触发的另一个事件。
3、中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用prevemtDefault()方法。
4、事件对象:①在IE中,事件对象是window对象的一个event属性。
声明:
②在标准DOM中,事件对象是事件处理函数的唯一参数。
声明:
解决兼容性:
二、实现:
HTML:
<p id="p1">Uncle Cat is a fat white cat !</p> <div id="d1"> <a>剪切</a> <a>复制</a> <a>粘贴</a> </div>
javascript:
window.onload=function(){ rightmenu('p1','d1'); } /**** * 封装右键菜单函数: * elementID 要自定义右键菜单的 元素的id * menuID 要显示的右键菜单DIv的 id */
function rightmenu(elementID,menuID){ var menu=document.getElementById(menuID); //获取菜单对象 var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素 element.onmousedown=function(aevent){ //设置该元素的 按下鼠标右键右键的 处理函数 if(window.event)aevent=window.event; //解决兼容性 if(aevent.button==2){ //当事件属性button的值为2时,表用户按下了右键 document.oncontextmenu=function(aevent){ if(window.event){ aevent=window.event; aevent.returnValue=false; //对IE 中断 默认点击右键事件处理函数 }else{ aevent.preventDefault(); //对标准DOM 中断 默认点击右键事件处理函数 }; }; menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;' //将菜单相对 鼠标定位 } } menu.onmouseout=function(){ //设置 鼠标移出菜单时 隐藏菜单 setTimeout(function(){menu.style.display="none";},400); } }
相关文章推荐
- JavaScript 对任意元素,自定义右键菜单的实现方法
- JavaScript 对任意元素,自定义右键菜单的实现方法
- 对任意元素,自定义右键菜单
- 任意位置生成右键自定义菜单插件context.js之API与调用
- win32 自定义右键菜单
- WEB开发中的右键自定义菜单
- 【Unity编辑器】使用反射和Attribute实现自定义右键菜单
- EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)
- flash actionscript右键自定义菜单
- jQuery自定义元素右键点击事件
- Duilib中为RichEdit\Edit控件添加自定义右键菜单
- 自定义Item窗口的元素之菜单窗口
- JS实现自定义右键菜单
- Flex自定义右键菜单
- cxGrid右键自定义菜单
- 给超链接自定义一个右键菜单
- Win7如何自定义鼠标右键菜单 添加新建WORD文档
- 给win8、win10系统添加自定义右键菜单项目
- jQuery实现漂亮的指定区域内鼠标右键关联菜单可自定义图标
- Flash 自定义局部右键菜单,为不同区域设定不同右键菜单(源文件)