自定义右键单击锚标记以在新选项卡中打开链接

Question

我有下面的代码来打开 <a> 元素的特定右键菜单。

在我右键单击并单击以在新选项卡中打开的任何链接上，它只会打开第一个链接。 java脚本中的计数器与我无法这样做有关。

我想在每个链接上单击鼠标右键，以便通过从 href 的 <a> 元素获取链接，在新选项卡中打开该链接。

如果有人有另一个脚本，当然应该更好地用于此目的，请与我分享。

谢谢。

从数据库中获取链接

$i =1;
$get_newbooks   =   mysqli_query($dba, "select * from mynewbooks
where status = 1
");
while ($thisbook        =   mysqli_fetch_array($get_newbooks)) {
?>
    <a href="<?php echo $thisbook['link']; ?>" id="openinnewtabt<?php echo $i++; ?>">
    <?php echo $thisbook['name']; ?>
    </a>
}

标签的右键菜单

<div class="hide" id="rmenu">
  <ul>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
    <li>
        <button style="text-align: center; color: black; width: 150px;"
        class="opennewtabt item copy-button">
        Open Link In New Tab
        </button>
    </li>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
  </ul>
</div>

CSS

.show {
  z-index: 10000000000000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid grey;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

Javascript

$(document).ready(function() {
    $('body').on('contextmenu', 'a', function() {
    var counter = 1;
    $('.opennewtabt').on('click', function() {
        var link = $('#openinnewtabt'+counter).attr('href');
        window.open(link, '_blank').focus();
        return false;
    });
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;
    });
});
// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}

Answer 1

您在contextmenu 处理程序中设置了click 处理程序...

相反，您应该将它放在外面并将href 传递给上下文菜单内的按钮。
这可以使用.data() 来完成。

所以你不需要在链接上添加任何id...也不需要counter。

$(document).ready(function() {

  // Context menu open
  $("body").on("contextmenu", "a", function() {

    // pass the href to the context menu button
    $(".opennewtabt").data("href", this.href)
    $(".opennewtabt").text($(this).text() + " in a new window")

    // document.getElementById("rmenu").className = "show";
    // document.getElementById("rmenu").style.top = mouseY(event) + "px";
    // document.getElementById("rmenu").style.left = mouseX(event) + "px";
    
    // With jQuery, the 3 lines above can be writen like this
    $("#rmenu").removeClass("hide").addClass("show").css({"top":mouseY(event) + "px", "left":mouseX(event) + "px"})
    
    window.event.returnValue = false;
  });

  // Context menu click handler
  $(".opennewtabt").on("click", function(e) {
    var link = $(e.target).data("href")
    window.open(link, "_blank").focus();
    return false;
  });
});


// this is from another SO post...
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return (
      evt.clientX +
      (document.documentElement.scrollLeft ?
        document.documentElement.scrollLeft :
        document.body.scrollLeft)
    );
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return (
      evt.clientY +
      (document.documentElement.scrollTop ?
        document.documentElement.scrollTop :
        document.body.scrollTop)
    );
  } else {
    return null;
  }
}

.show {
  z-index: 10000000000000;
  position: absolute;
  background-color: #c0c0c0;
  border: 1px solid grey;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">
  test link 1
</a><br>

<a href="http://test.com">
  test link2
</a><br>

<a href="http://hello.com">
  test link3
</a><br>

<div class="hide" id="rmenu">
  <ul>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
    <li>
      <button style="text-align: center; color: black; width: 150px;" class="opennewtabt item copy-button">
        Open Link In New Tab
      </button>
    </li>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
  </ul>
</div>

由于 SO sn-ps 中不允许使用 window.open，请查看 CodePen