我需要在网页上访问我们获得的正确点击选项吗?

时间:2016-08-11 05:23:21

标签: javascript web right-click

我的网页上有图片。当我右键单击图像时,我会在菜单中选择一些选项。我需要访问“将图像另存为”选项或其事件。所以从那里它应该保存到两个不同的地方。这是一个JSP页面。

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

1 个答案:

答案 0 :(得分:1)

不,您无法直接访问操作系统 contextmenu 的点击选项/事件,
但你可以模仿UI并使用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>
&#13;
&#13;
&#13;