js实现右键菜单功能

2019-11-19 18:48:22

字体：大中小

来源：转载

供稿：网友

本文解决的问题：1、实现右键菜单功能代码；2、阻止默认事件的实际应用。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css">  #menu {   position: fixed;   left:0;   top:0;   width:200px;   height: 400px;   background-color: blue;   display: none;  } </style></head><body> <div id="menu"> </div> <script type="text/javascript"> var menu = document.getElementById("menu"); document.oncontextmenu = function(e) {  var e = e || window.event;  //鼠标点的坐标  var oX = e.clientX;  var oY = e.clientY;  //菜单出现后的位置  menu.style.display = "block";  menu.style.left = oX + "px";  menu.style.top = oY + "px";  //阻止浏览器默认事件  return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。 } document.onclick = function(e) {   var e = e || window.event;   menu.style.display = "none"  } menu.onclick = function(e) {  var e = e || window.event;  e.cancelBubble = true; } // document.addEventListener("contextmenu",function(e){ // var e = e || window.event; // e.preventDefault(); // alert("menu"); // },false) </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于slideout.js实现移动端侧边栏滑动特效

下一篇：Javascript 判断两个IP是否在同一网段实例代码