html中实现某区域内右键自定义菜单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title></title> <meta charset= "GBK" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > <style type= "text/css" > #drawing { text-align: center; width: 500px; height: 500px; border: 1px solid blue; margin: 0 auto; overflow: auto; display: block; } body, div, ul, li { margin: 0; padding: 0; } body { font: 12px/1.5 \5fae\8f6f\96c5\9ed1; } ul { list-style-type: none; } #menu ul { position: absolute; float : left; border: 1px solid #979797; background: #f1f1f1; padding: 2px; box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); width: 230px; overflow: hidden; } #menu ul li { float : left; clear: both; height: 24px; cursor: pointer; line-height: 24px; white-space: nowrap; padding: 0 30px; width: 100%; display: inline-block; } #menu ul li:hover { background: #E6EDF6; border: 1px solid #B4D2F6; } .skin { width: 100px; padding: 2px; visibility: hidden; position: absolute; } </style> <script type= "text/javascript" src= "http://api.51ditu.com/js/ajax.js" ></script> <script type= "text/javascript" > //-->右键自定义菜单 window.onload = function () { var drawing = document.getElementById( 'drawing' ); var menu = document.getElementById( 'menu' ); /*显示菜单*/ function showMenu() { var evt = window. event || arguments[0]; /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ var rightedge = drawing.clientWidth - evt.clientX; var bottomedge = drawing.clientHeight - evt.clientY; /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ if (rightedge < menu.offsetWidth) menu.style.left = drawing.scrollLeft + evt.clientX - menu.offsetWidth + "px" ; else /*否则,就定位菜单的左坐标为当前鼠标位置*/ menu.style.left = drawing.scrollLeft + evt.clientX + "px" ; /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ if (bottomedge < menu.offsetHeight) menu.style.top = drawing.scrollTop + evt.clientY - menu.offsetHeight + "px" ; else /*否则,就定位菜单的上坐标为当前鼠标位置*/ menu.style.top = drawing.scrollTop + evt.clientY + "px" ; /*设置菜单可见*/ menu.style.visibility = "visible" ; LTEvent.addListener(menu, "contextmenu" , LTEvent.cancelBubble); } /*隐藏菜单*/ function hideMenu() { menu.style.visibility = 'hidden' ; } LTEvent.addListener(drawing, "contextmenu" , LTEvent.cancelBubble); LTEvent.addListener(drawing, "contextmenu" , showMenu); LTEvent.addListener(document, "click" , hideMenu); } </script> </head> <body> <div id= "drawing" > </div> <!--自定义右键菜单--> <div id= "menu" class = "skin" > <ul> <li><strong>HTML 学习</strong></li> <li>HTML 元素</li> <li>HTML 属性</li> <li>HTML 标题</li> <li>HTML 段落</li> <li>HTML 图像</li> <li>HTML 表格</li> <li>HTML 列表</li> <li>HTML 布局</li> <li>表单</li> </ul> </div> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2018-06-28 C# 可选参数 命名参数