javascript - js jquery 如何实现右键点击具体的 dom 元素，然后重写系统的右键菜单？
js jquery 如何实现右键点击具体的 dom 元素，然后重写系统的右键菜单？
我现在有代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title>jQuery制作Web页面鼠标右键美化菜单</title> <style type="text/css"> body{ position:relative;} ul, li{ margin:0; padding:0; list-style:none; font-size:12px;} .split{border-bottom:1px solid gray;} .popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius:2px;} .popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;} .popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius:2px;} </style></head><body><script type="text/javascript"> var kyPopupMenu = {}; kyPopupMenu = (function () { return { right: function (obj) { $('.popup_menu').remove(); var menu = '<div class="popup_menu app-menu"><ul><li><a url="http://www.cnblogs.com/mini-firework/">firework</a></li><li class="split"></li><li><a url="http://blog.csdn.net/e_real">疯狂的土豆专栏</a></li><li><a url="http://blog.163.com/qiuyg_yc_it/">网易博客</a></li></ul></div>'; popupMenuApp = $(menu) .find('a').attr('href', 'javascript:;') .end().appendTo('body'); //绑定事件 $('.app-menu a').on('click', function () { window.location.href = $(this).attr("url"); }); return popupMenuApp; } }; })(); //取消右键 $('html #phpernote').on('contextmenu', function () { return false; }).click(function () { $('.popup_menu').hide(); }); //桌面点击右击 $('html #phpernote').on('contextmenu', function (e) { var popupmenu = kyPopupMenu.right(); l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; popupmenu.css({left: l, top: t}).show(); return false; });</script><div id="phpernote" style="background-color:#ccc;">鼠标右击这个区域试试</div></body></html>我希望右击 id="phpernote"这块区域的时候，改写系统的右键菜单，右击除这个 dom 区域之外的其他地方还是显示系统的右键菜单。
现在我如果把 $('html #phpernote') 改为 $('html') 它就是整个页面重写了。
通过各种引擎搜了一下，都是整个页面都实现右键菜单改写的，不是我期望的，请大佬帮忙看看如何实现，小弟跪谢。
共有2个答案
你这个代码是没问题的，有问题的是你的 js 代码放倒了 HTML 代码块的上面，且没有放到 $(function(){...}) 里面，导致 JS 代码先执行了，元素还没创建，事件就没绑定到。
你只需要把 div 的代码放到 script 的前面就好了。
你的代码已经能够实现右键点击 id="phpernote" 区域时，显示你定义的右键菜单，同时取消了默认的右键菜单。如果你希望在右击除这个 dom 区域之外的其他地方显示系统的右键菜单，你可以考虑使用 jQuery 的事件委托。
事件委托是指将事件监听器添加到父元素上，而不是直接添加到实际的目标元素上。当事件在目标元素上触发时，事件会冒泡到父元素，事件监听器就会被触发。
在你的场景中，你可以将事件监听器添加到 body 或者 html 元素上，然后使用事件对象 e 的 target 来检查是否是目标元素。如果是目标元素，就执行你的右键菜单代码；如果不是目标元素，就阻止默认行为，不显示你的右键菜单。
下面是一种可能的实现方式：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title>jQuery制作Web页面鼠标右键美化菜单</title> <style type="text/css"> body{ position:relative;} ul, li{ margin:0; padding:0; list-style:none; font-size:12px;} .split{border-bottom:1px solid gray;} .popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius:2px;} .popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;} .popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius:2px;} </style></head><body><script type="text/javascript"> var kyPopupMenu = {}; kyPopupMenu = (function () { return { right: function (obj) { $('.popup_menu').remove(); var menu = '<div class="popup_menu app-menu"><ul><li><a url="http://www.cnblogs.com/mini-firework/">firework</a></li><li class="split"></li><li><a url="http://blog.csdn.net/e_real">疯狂的土豆专栏</a></li><li><a url="http://blog.163.com/qiuyg_yc_it/">网易博客</a></li></ul></div>'; popupMenuApp = $(menu) .find('a').attr('href', 'javascript:;') .end().appendTo('body'); //绑定事件 $('.app-menu a').on('click', function () { window.location.href = $(this).attr("url"); }); return popupMenuApp; } }; })(); //取消右键 $('body').on('contextmenu', function () { // 将 'html' 改为 'body' return false; // 在非目标元素上阻止默认右键菜单的显示 }).click(function () { // 点击事件处理程序可能有点问题，你可能需要检查这个部分是否符合你的需求。你可能需要更复杂的处理程序来处理点击事件。 $('.popup_menu').hide(); // 在目标元素外点击时隐藏你的右键菜单（如果你希望在点击后仍然显示你的菜单，你可以删除这行代码） }); //桌面点击右击显示自定义菜单 $('body').on('contextmenu', function (e) { // 将 'html' 改为 'body' var popupmenu = kyPopupMenu.right(); // 获取自定义右键菜单元素 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; // 计算菜单的左边距，使其不会超出屏幕的右边边界（如果自定义菜单比屏幕宽）-
本文向大家介绍基于JavaScript实现智能右键菜单，包括了基于JavaScript实现智能右键菜单的使用技巧和注意事项，需要的朋友参考一下 通过本文给大家介绍智能右键菜单，需要引入的文件再文末会给出，先给大家展示下代码： 具体代码如下所示： $('th') 指定加右键的标签，根据实际来确定 我这里是加在表格的表头上，所以是th标签 e.which = 3 表示是右键 这里列出了两种情况 一种是
-
问题内容： 我正在使用Selenium编写一些UI测试，并且使用Dojo工具箱具有一个JavaScript Tree控件。 我已经使用Dojo提供的示例为树的每个节点实现了一个上下文菜单，但是我需要Selenium测试来“调用”树节点上的右键，但是我无法使其正常工作。这些测试根本不会通过JavaScript模拟右键单击事件，并且不会显示上下文菜单。 是否有人在使用Dojo和Selenium调用上下
-
本文向大家介绍jquery实现右键菜单插件，包括了jquery实现右键菜单插件的使用技巧和注意事项，需要的朋友参考一下 今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了，写出来的代码和效果如下： js部分： css部分代码如下： 创建调用代码如下： 销毁调用代码如下： 效果如下： 调用
-
当用户在网页中点击鼠标右键后，会唤出一个菜单，在上面有复制、粘贴和翻译等选项，为用户提供快捷便利的功能。Chrome也将这里开放给了开发者，也就是说我们可以把自己所编写的扩展功能放到右键菜单中。 要将扩展加入到右键菜单中，首先要在Manifest的permissions域中声明contextMenus权限。 "permissions": [ "contextMenus" ] 同时还要在i
-
问题内容： 右键单击Javascript事件吗？如果可以，该如何使用？ 问题答案： 正如其他人提到的那样，可以[通过常规鼠标事件（mousedown，mouseup，click）检测[鼠标右键。但是，如果在弹出右键单击菜单时正在寻找触发事件，那么您所寻找的位置是错误的。也可以通过键盘（在Windows和某些Linux上为shift + F10或上下文菜单键）访问右键单击/上下文菜单。在这种情况下，
-
问题内容： 我想阻止标准上下文菜单，并手动处理右键单击事件。 怎么做？ 问题答案： 使用事件。 这是一个例子： 并使用事件监听器： 不要忘记返回false，否则仍会弹出标准上下文菜单。 如果要使用编写的函数而不是，请记住在函数和属性中都返回false 。