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

Question

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

在任何 link 上，我右键单击并单击以在新选项卡中打开，它只会打开第一个 link。 java-script 中有一些与计数器有关的东西，我无法这样做。

我想打开每个 link 的右键单击，这样它将通过从 <a> 的 href 中获取 link 在新选项卡中打开 link元素.

如果有人有其他更好的脚本，请与我分享。

谢谢。

Link 从数据库获取

$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 片段中不允许使用 window.open，请查看 CodePen

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

Custom right click for anchor tag to open link in new tab

html

javascript

contextmenu

right-click