使用getElementById禁用有许多可以单击的链接的链接

Question

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，但没有禁用它，所以我有点不知道如何从这里开始。

Answer 1

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

<a href="https://www.google.com/" onclick="return false;">Clicking me wont redirect.</a>

如果您想使用addEventListener()，那么您需要能够区分不应该重定向的元素。可以使用类似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>

Answer 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>