I need to access the right Click options we get, on a webpage?

Question

I have web page with an image. When I right click on the image, I'll get some option in the menu. I need to access the "Save Image As" option or its event. So that from there it should save to two different places. This is a JSP page.

This is image of the webpage, and the right click options.

There is a ```contextmenu``` event that is fired when the right mouse button is clicked. But I don't think there is any event fired on selecting one of the options. — kkaosninja, Aug 11 '16 at 05:28
Ok, I can use context menu..Can i save the same image with the same size, to two or three locations which i am mentioning???? — Rahul Devan, Aug 11 '16 at 06:32

score 1 · Answer 1 · answered Aug 11 '16 at 07:35

No, you cannot directly access OS right contextmenu's click options/events,
but what you can is imitate the UI and trigger some actions using JS

// Get all images
var IMAGES = document.querySelectorAll("img");
// Assign to all images our contextmenu right-click-jacker
[].forEach.call(IMAGES, function(IMG){
  callCustomContextmenu(IMG);
});

function callCustomContextmenu(IMG) {

  var ctxmenu = document.getElementById("ctxmenu");
  var download = document.getElementById("download");
  
  IMG.addEventListener("contextmenu", function(evt) {

    evt.preventDefault(); // don't show OS contextmenu

    // TODO: Show fixed Custom DIV at coordinates: evt.clientX evt.clientY
    // for now this will do...
    ctxmenu.style.display = "block";
    
    // Download image
    // http://stackoverflow.com/a/21210576/383904
    download.addEventListener("click", function(){
      var A = document.createElement('a');
      A.href = IMG.src;
      A.download = '';
      document.body.appendChild( A );
      A.click();
    });
  });

}

#ctxmenu{display:none;} /* TODO: make if fixed and nice */

Right click and click download<br>
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico">  
<div id="ctxmenu">
  <span id="download">Download</span> 
</div>

I need to access the right Click options we get, on a webpage?

1 Answers1