js实现右键菜单功能
本文解决的问题:1、实现右键菜单功能代码;2、阻止默认事件的实际应用。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>右键菜单</title> <styletype="text/css"> #menu{ position:fixed; left:0; top:0; width:200px; height:400px; background-color:blue; display:none; } </style> </head> <body> <divid="menu"> </div> <scripttype="text/javascript"> varmenu=document.getElementById("menu"); document.oncontextmenu=function(e){ vare=e||window.event; //鼠标点的坐标 varoX=e.clientX; varoY=e.clientY; //菜单出现后的位置 menu.style.display="block"; menu.style.left=oX+"px"; menu.style.top=oY+"px"; //阻止浏览器默认事件 returnfalse;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件。 } document.onclick=function(e){ vare=e||window.event; menu.style.display="none" } menu.onclick=function(e){ vare=e||window.event; e.cancelBubble=true; } //document.addEventListener("contextmenu",function(e){ //vare=e||window.event; //e.preventDefault(); //alert("menu"); //},false) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。