使用 getElementById 禁用链接，其中有许多可以单击的链接答案

【问题标题】：Disabling a link using getElementById where there are many links that could be clicked使用 getElementById 禁用链接，其中有许多可以单击的链接
【发布时间】：2021-05-06 08:43:30
【问题描述】：

document.getElementById("img1").addEventListener("click", function(event){
  event.preventDefault()
});

我已经尝试了上面的 JavaScript，它确实禁用了链接，同时保留了我想要的右键和中键单击操作。

但是，我有很多链接，每个链接都有一个动态创建的 ID，我不知道如何将 ID 传递给上述代码。

我尝试了以下方法：

HTML：

<a id="img' . $row["idImage"] . '" onClick="passID(this.id)" href="images/img01"><div></div></a>

JavaScript：

function passID(linkId) {
  var imgid = linkId;
  alert(imgid);
  document.getElementById(imgid).addEventListener("click", function(event) {
    event.preventDefault()
  });

但它不会禁用链接。我输入了一个警报，它确实返回了点击链接的正确 ID，但没有禁用它，所以我对如何从这里开始有点茫然。

【问题讨论】：

hmm ids 是唯一的，仅用于一个元素，您是否尝试过使用类并循环它们以添加事件监听器？
看看event delegation，动态id容易出错，做很多不必要的工作。

标签： javascript getelementbyid disable-link

【解决方案1】：

如果您可以使用事件处理程序属性，只需使用 onclick="return false;" 即可。

&lt;a href="https://www.google.com/" onclick="return false;"&gt;Clicking me wont redirect.&lt;/a&gt;

如果您想使用addEventListener()，那么您需要能够区分不应重定向的元素。您可以使用selector 之类的a[id^="img"] 来选择所有id 属性以img 开头的锚元素。
然后你需要选择所有应用的元素，循环它们，并添加事件监听器。

document.querySelectorAll('a[id^="img"]').forEach(anchorElement => {
  anchorElement.addEventListener('click', event => event.preventDefault());
});

<a href="https://www.google.com/" id="img1">Link 1</a>
<a href="https://www.google.com/" id="img2">Link 2</a>

虽然将类添加到您想要防止重定向的锚标签并选择它们可能会更干净且更不容易出错。

document.querySelectorAll('.dont-redirect').forEach(anchorElement => {
  anchorElement.addEventListener('click', event => event.preventDefault());
});

<a href="https://www.google.com/" class="dont-redirect">Link 1</a>
<a href="https://www.google.com/" class="dont-redirect">Link 2</a>

【讨论】：

我使用了您的最后一个示例，并在我的锚标签中添加了类 - 它运行良好，太棒了，非常感谢！

【解决方案2】：

您可以删除不必要的 onClick 事件处理程序并直接使用此脚本显示 ID：

$(document).on('click', 'a', function () {
  // event.preventDefault();
  alert(this.id);
});

<div class="container">
  <a id="displayed-id" href="images/img01">Click</a>
</div>

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

【讨论】：