模拟一个实际的右键，而不仅仅是鼠标向下或鼠标向上

Simulate an actual right click, not just mousedown or mouseup

本文关键字：鼠标 不仅仅是 右键 一个 模拟      更新时间：2023-09-26

我正在使用一个叫做contextmenu的jQuery插件来代替某些元素上的右键上下文菜单。这个插件的源代码可以在这里找到。

将上下文菜单附加到元素上，如下所示:

$(".class").contextMenu('menu_template', {
    menuStyle: {
        border: '0px',
    },
    itemStyle: {
    },
    itemHoverStyle: {
    },
    onShowMenu: function(e, menu) {     
    },
    other stuff ....
})

另外，我想手动触发这个菜单，并认为最简单的方法是模拟右键单击元素。

I have try:

$('.class').triggerHandler('contextmenu');

和

$('.class').trigger({
    type:'mousedown',
    button:2
}).trigger({
    type:'mouseup',
    button:2
});

和

$('.class').trigger({
    type:'mousedown',
    which:3
}).trigger({
    type:'mouseup',
    which:3
});

和

$('.class').trigger({
    type:'mousedown',
    which:3
})

这些都没有成功。

我确信这与这个插件将自己附加到元素并覆盖上下文菜单的方式有关，但我不是JavaScript专家，所以我不确定发生了什么。

如何手动触发此菜单出现?

你试过这样的方法吗?

$(document).mousedown(function(e) {
    if (e.button == 2) {
        $("span.demo1").trigger("contextmenu");
    }
    return true;
});


$(document).ready(function() {
  $(document).bind("contextmenu", function(e) {
    e.preventDefault();
  });
  $('span.demo1').contextMenu('myMenu1', {
    bindings: {
      'open': function(t) {
        alert('Trigger was ' + t.id + ''nAction was Open');
      },
      'email': function(t) {
        alert('Trigger was ' + t.id + ''nAction was Email');
      },
      'save': function(t) {
        alert('Trigger was ' + t.id + ''nAction was Save');
      },
      'delete': function(t) {
        alert('Trigger was ' + t.id + ''nAction was Delete');
      }
    }
  });
});
$(document).mousedown(function(e) {
  if (e.button == 2) {
    var element = document.getElementById("quickDemo"),
      ev;
    if (document.createEvent) {
      ev = new MouseEvent("contextmenu", {
        screenX: 0,
        screenY: 0,
        clientX: element.offsetLeft,
        clientY: element.offsetTop + element.offsetHeight,
        ctrlKey: false,
        shiftKey: false,
        altKey: false,
        metaKey: false,
        button: 2
      });
      element.dispatchEvent(ev);
    } else {
      ev = document.createEventObject();
      element.fireEvent('contextmenu', ev);
    }
  }
  return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js"></script>
<div class="contextMenu" id="myMenu1" style="display: none;">
  <ul>
    <li id="open">
      <img src="folder.png">Open</li>
    <li id="email">
      <img src="email.png">Email</li>
    <li id="save">
      <img src="disk.png">Save</li>
    <li id="delete">
      <img src="cross.png">Delete</li>
  </ul>
</div>
<span class="demo1" id="quickDemo" style="float:right;border: 1px solid #888;">
    <b>DEMO</b> right-click me!!
  </span>

相关文章：