JavaScript: 捕获右键点击并在特定元素内禁用菜单

Question

我编写了一个jQuery脚本，屏幕上有一个小网格，用户可以使用拖放将瓷砖放置在网格上（吸附到位）。目前，如果您将鼠标悬停在瓷砖上，则会淡入旋转选项，但我更喜欢右键单击进行旋转（这样更自然）。我知道完全禁用右键单击通常是不受欢迎的，所以想知道是否可能仅在特定元素内捕获该事件，执行JS操作并禁用上下文菜单？ - 这适用于每个浏览器。

另外，目前我正在使用jQuery进行效果和自定义JavaScript进行拖放，值得考虑使用jQuery插件进行拖放吗？

非常感谢。

- Pez Cuckow

Answer 1

为了捕获右键点击事件，您可以使用这个jQuery代码：

$('#gridID').bind('contextmenu', function(e) {
   // do stuff here instead of normal context menu
   return false;
});

这在Chrome、Firefox和Safari中有效。 没有测试IE。在IE中也有效。唯一的限制是显然在Opera中不起作用。所以如果你可以接受这个...

- ryanulit

---

这个答案是无效的，contextmenu 是在右键鼠标按下时触发，而不是在右键点击时触发。 - Sebastian Nowak

对一个可行的答案进行投票否定有点苛刻和挑剔。也许措辞有些令人困惑，但即使Mozilla文档也说“右键单击”(https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu)。无论如何，代码只是简单地捕获浏览器的“contextmenu”事件并阻止它显示菜单。 - ryanulit

Answer 2

我不喜欢在网页上使用右键。但是，如果你真的想这么做，你可以像这里描述的那样捕获右键。如果鼠标位于您的网格单元上，则可以有条件地阻止右键（换句话说，在事件处理程序中返回false）。

关于您的奖励问题：jquery ui具有拖放功能。使用它可能比自己编写更容易。

- Adrian Grigore

---

非常感谢，根据您的建议，我查看了“可拖动”并发现这个链接http://jqueryui.com/demos/draggable/snap-to.html似乎是我需要的拖动功能。 - Pez Cuckow

Answer 3

“是否值得考虑使用jQuery插件进行拖放操作？”

只有当您不打算在iPhone O.S上使用Safari浏览器（包括iPad）时，才需要考虑。请参阅Safari Web Content Guide: Handling Events。

- Matt G