主要用到了 oncontextmenu 事件，在 oncontextmenu 事件中使用 return false 屏蔽掉原生右键菜单，再使用 event 获取鼠标的坐标位置，设置自定义菜单的位置。
| <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "jquery-3.1.1.js" charset= "utf-8" ></script> <script src= "contextMenu/jquery.ui.position.min.js" type= "text/javascript" ></script> <script src= "contextMenu/jquery.contextMenu.js" type= "text/javascript" ></script> <link href= "contextMenu/jquery.contextMenu.css" rel= "stylesheet" type= "text/css" /> </head> <body> <button class= "context-menu-one" >按钮1</button> <script type= "text/javascript" > $( function () { //初始化菜单 $.contextMenu({ selector: '.context-menu-one' , callback: function (key, options) { console.log( "点击了：" + key); }, items: { "edit" : {name: "编辑" , icon: "edit" }, "cut" : {name: "剪切" , icon: "cut" }, "copy" : {name: "复制" , icon: "copy" }, "paste" : {name: "粘贴" , icon: "paste" }, "delete" : {name: "删除" , icon: "delete" }, "sep1" : "---------" , "quit" : {name: "退出" , icon: function (){ return 'context-menu-icon context-menu-icon-quit' ; }} } }); }); </script> </body> </html> |
icon: "paste" // Class context-menu-icon-paste is used on the menu item.
使用自带的图标需要font文件夹的内容