如何在网页上访问右键单击选项？

Question

我有一个带有图像的网页。当我右键单击图片时，会在菜单中得到一些选项。我需要访问“另存为”选项或其事件。因此，从那里应该保存到两个不同的位置。这是一个JSP页面。

- Rahul Devan

---

你正在尝试捕获操作系统事件动作吗？ - OneCricketeer

当右键单击时会触发 contextmenu 事件。但我认为在选择其中一个选项时不会触发任何事件。 - kkaosninja

好的，我可以使用上下文菜单。我能否将相同大小的相同图像保存到我提到的两个或三个位置？ - Rahul Devan

Answer 1

不，你不能直接访问操作系统右键上下文菜单的点击选项/事件，但是你可以模拟用户界面并使用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
    // https://dev59.com/jmMm5IYBdhLWcg3wi_i0#21210576
    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>

- Roko C. Buljan