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?

It is possible: http://stackoverflow.com/questions/7914684/trigger-right-click-using-pure-javascript — wf4, Apr 19 '16 at 06:34
Seems like it was not possible to do that in my iframe example, the question has been edited. — Anders Lindén, Apr 19 '16 at 06:51

Mark Schultheiss · Answer 1 · 2016-04-19T08:07:21.160

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>

Sorry, this question was not about how to disable the context menu.I changed the title. — Anders Lindén, Apr 19 '16 at 08:00
What you DO with that event when it is triggered is up to you. Return true if you do not wish to disable, keep in mind the default menu will NOT appear (not possible) from script. — Mark Schultheiss, Apr 19 '16 at 08:03

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

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.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 19 '16 at 07:27

Hosein Aqajani

1,553
4
26
46

I want to do this without collaboration of the webpage script. – Anders Lindén Jun 04 '16 at 09:10

How to right click from javascript

2 Answers2