How to right click from javascript

Question

It seems that it is not possible to emulate a right click in javascript.

I have tried to right click an element (paragraph) in an iframe like this:

html

<button onclick="popup_context_menu_in_iframe()">
   popup menu
</button>
<br/><br/>
<iframe srcdoc="<p>Hello world!</p>">
</iframe>

script

function popup_context_menu_in_iframe()
{
  var $element = $('iframe').contents().find('p');      
  var element = $element.get(0);

  if (window.CustomEvent) {
    element.dispatchEvent(new CustomEvent('contextmenu'));
  } else if (document.createEvent) {  
    var ev = document.createEvent('HTMLEvents');
    ev.initEvent('contextmenu', true, false);
    element.dispatchEvent(ev);
  } else { // Internet Explorer
    element.fireEvent('oncontextmenu');
  }
}

https://jsfiddle.net/sca60d64/2/

It seems like it actually is impossible to make the context menu appear so I need to find other ways.

I first headed at creating a chrome extension to add a function to the window object, callable from any script that is using some extra power to do it.

However, A chrome extension surprisingly seems to not provide me with a way of creating functions in the window object. I have not taken a look if it even gives me the power to popup the context menu.

I did not experiment a lot with chrome extensions before giving up on that.

So I need another solution.

It doesnt matter if a solution only works in google chrome or if there is no guarantee that it will stop work in the next version.

Should I hook the chrome process with a dll? Is that it?

Answer 1

This should work with this markup:

<div id="mything">
Howdy this is my thing
</div>

event handler:(disable default)

var el=document.getElementById("mything");
el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

Then when you execute this, "sucess!" alerts followed by the text changing to "Howdy this is my thing this is canceled":

EDIT event handler:(do NOT disable default)

var el=document.getElementById("mything");
el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return true;
}, true);

Then when you execute this, "sucess!" alerts followed by the text changing to "Howdy this is my thing this is NOT canceled":

function simulateRightClick() {
  var event = new MouseEvent('contextmenu', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('mything');
  var canceled = !cb.dispatchEvent(event);
  var cbtext = cb.textContent;
  if (canceled) {
    // A handler called preventDefault.
    console.log("canceled");

    cb.textContent = cbtext + "this is canceled";
  } else {
    // None of the handlers called preventDefault.
    cb.textContent = cbtext + "this is NOT canceled";
    console.log("not canceled");
  }
}
simulateRightClick();

Test it out here: https://jsfiddle.net/MarkSchultheiss/bp29s0j4/

EDIT: alternate selector:

var fcb = document.getElementById('myframe').contentWindow.document.getElementById('pid');
fcb.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  alert('successFrame!');
  return false;
}, false);

Given this markup:

<iframe id='myframe' srcdoc="<p id='pid'>Hello world!</p>">
</iframe>

Answer 2

You can call a dll by an exe file in the chrome extension through Native Messaging. I have provided a sample of Native Messaging procedure in this answer: See the answer of this question

I hope to be useful.