javascript自定义右键菜单并屏蔽默认右键菜单【原创】

最新推荐文章于 2024-03-03 21:38:39 发布
最新推荐文章于 2024-03-03 21:38:39 发布
阅读量2.6k 收藏
点赞数

原理很简单，就是右击鼠标（oncontextmenu事件）return false阻止默认右键菜单，之后显示自定义的右键菜单，菜单显示位置由事件源的clientX和clientY计算得出。



[html]  view plain  copy
 print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>拖拽+自定义右键菜单</title>  
  6. <style type="text/css">  
  7. body{ margin:0; padding:0}  
  8. #ul1{ width:130px; height:120px; padding:10px 3px; background:#fff; border:#ACA899 1px solid; display:none; position:absolute; left:0;top:0;}  
  9. #ul1 li{ width:130px; height:28px; line-height:28px; font-size:14px; border-bottom:#ACA899 1px dashed; text-align:center; list-style:none}  
  10. #ul1 li:hover{ background:#316AC5}  
  11. </style>  
  12. <script type="text/javascript">  
  13. window.onload=function()  
  14. {  
  15. var ul=document.getElementById("ul1")  
  16. document.oncontextmenu=function(ev)  
  17. {  
  18. var ev=ev||window.event  
  19. var l=ev.clientX  
  20. var t=ev.clientY  
  21. ul.style.display="block"  
  22. ul.style.left=l+'px'  
  23. ul.style.top=t-16+'px'  
  24. return false;  
  25. }  
  26. document.onclick=function()  
  27. {  
  28. ul.style.display="none"  
  29. }  
  30. }  
  31. </script>  
  32. </head>  
  33.   
  34. <body>  
  35. <ul id="ul1">  
  36. <li>自定义右键菜单</li>  
  37. <li>自定义右键菜单</li>  
  38. <li>自定义右键菜单</li>  
  39. <li>自定义右键菜单</li>  
  40. </ul>  
  41. </body>  
  42. </html>  
mingqingyuefeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex自定义右键菜单 完全屏蔽
01-20
总的来说，通过理解并应用Flex的`ContextMenuStrip`和`MenuItem`类，开发者可以实现完全屏蔽默认右键菜单，并创建符合应用需求的自定义右键菜单，提供更丰富的交互体验。这个过程中，需要注意的是，自定义菜单的设计...
js实现自定义右键菜单
10-15
1. **屏蔽默认的右键菜单**：在JavaScript中，可以通过监听`document`对象的`oncontextmenu`事件来取消浏览器的默认右键菜单行为。当用户右键点击时，阻止浏览器的默认响应，通常是调用`event.preventDefault()`或...
HTML中自定义鼠标右键菜单
最新发布
m0_62317155的博客
03-03 1241
今天突然有人跟我提到了HTML中如何自定义鼠标右键菜单，这里大概记录一下吧，方便下次直接复制。免得还去看API文档。
JavaScript - 屏蔽鼠标右键菜单
qq_29761395的博客
11-04 1460
文章目录屏蔽鼠标右键菜单参考 屏蔽鼠标右键菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屏蔽鼠标右键菜单</title> <style type="text/css"> </style> </head>
js中如何实现阻止默认行为及实现自定义右键菜单
YY的博客
10-25 2829
js中如何实现阻止默认行为及实现自定义右键菜单
html个性化右键菜单
weixin_45144581的博客
05-24 1858
学习了对页面内的右键菜单进行个性化，效果如下图所示： 关于本效果的实现有以下几个要点： 1，返回一个错误的指使，禁止原有菜单弹出； 2，通过decument.getelementbyid()把隐藏的自己编写的菜单找到并显示（设置display为block）； 3，使菜单跟随鼠标位置，e.clientX(Y)表示鼠标的X(Y)轴坐标，用来设置左（顶）侧距离； 4，设置左键点击使菜单消失 以下为具体实现代码： <style> body{ background-col
JS如何在浏览器中屏蔽右键菜单
hmwz0001的博客
03-01 1322
秋风写于淄博 业务联系与技术交流：qq375172665。可以在整个页面中屏蔽，也可以在某个元素上屏蔽右键菜单。
Javascript实现的简单右键菜单类
10-23
这个类能够屏蔽浏览器默认的右键菜单，并提供自定义的菜单项和事件处理。 首先，这个右键菜单类包含以下几个主要参数： 1. `div`：触发显示右键菜单的HTML元素的ID，通常是用户点击右键的区域。 2. `menuDiv`：...
使用OpenLayers3 添加地图鼠标右键菜单
11-22
在OpenLayers 3中添加地图鼠标右键菜单是一项常见的需求，可以帮助用户自定义地图交互行为。要实现这一功能，我们需要了解OpenLayers的工作原理，并掌握如何处理鼠标事件和地图坐标转换。 首先，OpenLayers是一个...
完整版屏蔽超文本浏览框右键菜单2.2.rar
04-02
这个2.2版本可能包含了错误修复、性能提升或者增加了新的特性，比如可能提供了自定义菜单的功能，让用户在屏蔽默认菜单的同时可以展示自定义的选项，或者增加了对触摸设备的支持。 总之，“完整版屏蔽超文本浏览框...
html js 屏蔽原有右键功能菜单，自定义打造专属右键菜单
09-21
html js 屏蔽原有右键功能菜单，自定义右键菜单
html右键菜单编写,JavaScript 自定义html元素鼠标右键菜单功能
weixin_39876645的博客
05-30 172
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值编码实现window.onload = function(){var menu = document.getElementById('menu');document.body.oncontextmenu =...
js屏蔽鼠标右键默认事件以实现自定义菜单
热门推荐
夏尔的小酒馆
12-18 1万+
2017-12-18日，2017年即将结束的日子里。 公司做了一个项目，主要难点在于实现公司组织架构图上，何谓组织架构图，如下便是： 这里的每个节点都有相应的右键菜单，说白了就跟你用xmind的体验是一样的，用户体验自然是很好的，毕竟开发了都接近一个礼拜，而且还要加班。 做公司项目嘛，就要求快，首先就是先在网上找现成的呗，最开始找的是OrgChart,可是它对数据格式的要求十
HTML5自定义右键菜单
q1424966670的博客
08-30 1万+
<div id="opration" style="display:none;"> <ul> <li><a href="#" onclick="downloadFile()">download</a></li> <li><a href="#" onclick="openWindow()"&g...
JS--屏蔽浏览器右键菜单
weixin_34410662的博客
01-11 1471
//屏蔽浏览器右键菜单    if (window.Event)     document.captureEvents(Event.MOUSEUP);     function nocontextmenu(){      event.cancelBubble = true      event.returnValue = false;      return false;     }     fu...
右击阻止默认事件和右击显示菜单
qq_54357054的博客
05-27 2069
阻止右击默认事件方式: 1. 阻止页面上的默认事件：（在页面上的右击事件都将被禁止） document.oncontextmenu = function () { // e.preventDefault() // 或者 都可以 return false; } 2. 阻止元素上的默认右击事件： <div id="app"> <div class="box"></div> <div class="..
js自定义右键菜单
halo1416的博客
09-23 1万+
前言：现在的网页基本都是有右键菜单的，类似于： （来自于Chrome任务网页，“捕捉网页截图 - FireShot的” 是安装的一个插件）； 但是，我们有时候可以在一些网站上看到不一样的右键菜单即自定义右键菜单，如腾讯企业邮箱网页版：   今天，记录一些简单的右键菜单是怎么做的： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
最简单的禁用鼠标右键菜单---禁止鼠标选中
世界和我们都不该止步于此
04-15 706
//禁止鼠标右键菜单 document.addEventListener('contextmenu',(e)=> { e.preventDefault() }) //禁止鼠标选中 document.addEventListener('selectstart',(e)=> { e.preventDefault() }) 无非就是阻止了默认的行为
鼠标右击元素时阻止浏览器右键菜单并且展示自定义右键菜单
04-01
首先，我们需要阻止浏览器默认的右键菜单： ```javascript document.addEventListener('contextmenu', function(event) { event.preventDefault(); }); ``` 然后，我们需要创建一个自定义的右键菜单，并且根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值