在图像上右键单击PreventDefault

PreventDefault with right click on an image

本文关键字:单击 PreventDefault 右键 图像      更新时间:2023-09-26

是否可以在图像上触发文档右键事件?

这就是我目前所做的,我只能在图像

上跟踪右键事件
<script type="text/javascript">
    $("#myImage").mousedown(function (event) {
        if (event.which == 3) {
           //I need Some code to fire Document right click event (or maybe a different method)
        }
    });
</script>

谢谢你的帮助

Edit1:我想要的正是当我右键单击我的图像时,我想显示一个菜单,而不是图像右键单击菜单,而是文档右键单击菜单这是像图像不存在或禁用,再次感谢您的帮助:)

Edit2:到目前为止,我所做的是使用preventDefault禁用右键事件,现在我需要显示菜单:

<script type="text/javascript">
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
//Need to display the menu
}, false);
</script>

Edit3:它工作了,谢谢,我创建了我自己的菜单,如果我有默认菜单,那就太好了,但这个也是完美的:)

<script type="text/javascript">
    $(document).bind("contextmenu", function (event) {
        event.preventDefault();
        $(".custom-menu").toggle(100).
  css({
      top: event.pageY + "px",
      left: event.pageX + "px"
  });
    });
   //To hide the menu if left click event is fired
    $(document).bind("mousedown", function () {
        $(".custom-menu").hide(100);
    });
</script>
//New Menu
<ul class='custom-menu'>
  <a>Back</a><br />
  <a>Refresh</a><br />
  <a>Save</a><br />
</ul>
<style type="text/css">
.custom-menu {
  position: absolute;
  background-color:#EEE;
  overflow: hidden;
  width: 100px;
  }
</style>

event.which实际上是错误的检查…

使用event.button == 2。参考MouseEvent文档

或者使用contextmenu事件,正如@MarshallOfSound建议的那样(但随后作为答案被删除),但要注意,如果用户通过右击以外的其他方法调用contextmenu,例如在OSX上左键单击+ CTRL,它也可能会触发。而且这是HTML5最新的东西,所以它可能不能在旧的浏览器上工作。

编辑编辑后,contextmenu可能更适合您的需要。另外,event.preventDefault是你的朋友。div;)