任意元素自定义右键菜单的JavaScript实现方法

1.一些概念：1。鼠标事件具有botton属性：它返回一个整数，指示单击了哪个鼠标按钮。BUG:在IE和标准DOM的鼠标事件中，唯一属性值相同的按钮事件是“右键”事件，两者都返回2。2.onmousedown事件：指示按下鼠标按钮的动作。oncontextmenu事件：通过单击鼠标触发的另一个事件。3.中断默认事件处理函数的方法：在IE中设置returnValue=false在DOM中调用preventDefault()方法。4.事件对象：在IE中，事件对象是窗口对象的一个事件属性。声明：

在标准DOM中，事件对象是事件处理函数的唯一参数。声明：

解决兼容性问题：

二、实现：HTML:复制代码如下：p id=' P1 '猫叔是只胖白猫！/p div id='d1' a剪切/a复制/a粘贴/a /divjavascript:复制代码如下： window . onload=function(){右菜单(' P1 '，' D1 ')；}/* * * * *封装右键菜单功能：*元素的elementID ID自定义右键菜单*要显示的右键菜单DIv的Menuid ID */函数右键菜单(elementID，Menuid){ var Menu=document . getelementbyid(Menuid)；//获取菜单对象varelement=document . getelementbyid(element id)；//获取并单击带有用户定义的右键元素的元素。onmousedown=function(AE vent){//设置处理函数if(window . event)AE vent=window . event用于按下此元素的鼠标右键；//解决兼容性if(aevent.button==2){ //当事件属性button的值为2时，表用户按下文档的右按钮。oncontext menu=function(aevent){ if(window。事件){aevent=window。事件；aevent.returnValue=false//右键单击IE中断的默认事件处理程序} else { aevent . preventdefault()；//标准DOM中断的默认右键事件处理程序}；};menu . style . CSS text=' display : block；top: ' aevent.clientY ' px'left: ' aevent.clientX ' px'//相对于鼠标定位菜单}}菜单。onmouseout=function(){//设置隐藏菜单settimeout (function () {menu。风格。显示='无'；},400);}}