Simulate an actual right click, not just mousedown or mouseup

Question

I am using an (admittedly very old) jQuery plugin called contextmenu to replace the right click context menu on certain elements. The source for this plugin can be found here.

You attach the context menu to an element like so:

$(".class").contextMenu('menu_template', {
    menuStyle: {

        border: '0px',

    },
    itemStyle: {

    },
    itemHoverStyle: {

    },
    onShowMenu: function(e, menu) {     

    },
    other stuff ....
})

Additionally, I would like to manually trigger this menu, and thought the easiest way would be to simulate a right click on the element.

I have tried:

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

and

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

and

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

and just

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

None of these have worked.

I am sure this has something to do with the way this plugin attaches it self to the element and overrides the context menu, but I am no JavaScript expert so am not sure what is going on.

How can I manually trigger this menu to appear?

See https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent — guest271314, May 15 '15 at 15:14
@guest271314 How will this help me? By creating a mouse event? Isn't that what I have already tried, but using jQuery instead of pure Javascript? — superphonic, May 15 '15 at 15:20
Not certain if will help; only option to possibly test ? Have tried`js`, without jQuery ? Different utilizing `js` ; for example , initiating `click` of `a` element see `.get(0).click()` at http://stackoverflow.com/a/24689865/ . Try same with `.trigger("click")` — guest271314, May 15 '15 at 15:25
See https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Triggering_built-in_events — guest271314, May 15 '15 at 16:04

Ramiz Wachtler · Accepted Answer · 2015-05-15T16:34:23.157

Have you tried something like this?

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

SNIPPET

$(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>

I'm sorry, now I've imported the plugin you've linked in your question. — Ramiz Wachtler, May 15 '15 at 15:48
:-) Thanks this actually works pretty well, except if you run your code and right click anywhere on the page first, the menu doesn't appear over the element it's attached to, it sticks to the corner of the page. I think the plugin must take the coordinates of the mouse to place the drop down rather than the element. Any ideas how to fix this? — superphonic, May 15 '15 at 16:04
Ok, I had to change the way you trigger the event by creating a new one, the method `MouseEvent(...)` takes some arguments as a dictionary, so I've modified two of them (`clientX` and `clientY`) to set the right position for your menu. — Ramiz Wachtler, May 15 '15 at 16:35

Simulate an actual right click, not just mousedown or mouseup

1 Answers1