仅通过右键单击“在新选项卡中打开链接”

Question

所以，我有一个 div，当它被左键单击时，它会弹出一个弹出窗口。

但是，我想要一个指向 div 的链接，所以当用户右键单击时，会有一个“href”选项，并且可以单击“在新选项卡中打开链接”。

这就是我的意思：

 <div class="show_popup">
    Shows popup for `example.com/hi`
 </div>

那么，有没有办法添加“href”，它不执行任何“左键单击”功能（即不会将用户重定向到另一个页面），但是当用户右键单击它时，会有一个“在新标签页中打开链接”选项。

我希望这是有道理的。

谢谢！

Answer 1

有趣的问题。我想知道这是否也是可能的，并提出了以下建议：

注意：代码可能无法在 Stackoverflow 或任何其他可以托管代码的服务上运行，因为它在沙盒环境中运行。如果您打开控制台，您可能会看到警告，告诉您它已阻止弹出窗口。要访问您的控制台：

铬

Ctrl / 命令+Shift / Option+J

火狐

Ctrl / Command+Shift / Option+K

$(function() {

  $('.my-element').on('click contextmenu', function(e) {

    // If the right mouse button is used 
    if (e.which === 3) {

      // Grab data-link value from <div> 
      var link = $(this).data('link');
      // Open new tab
      window.open(link, '_blank');

    }

    // Cancel default right click behavior
    return false;

  });

});

.my-element {
  width: 200px;
  height: 200px;
  color: white;
  background: tomato;
  font: bold 1em sans-serif;
  text-align: center;
  line-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-element" data-link="https://www.google.com">Right click here</div>