CODEWITHSUNDEEP
javascriptjquery
superphonic
superphonic

Reputation: 8074

Simulate an actual right click, not just mousedown or mouseup

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?

Upvotes: 1

Views: 1577

Answers (1)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

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>

Upvotes: 1

Related Questions