Disabling a link using getElementById where there are many links that could be clicked

Question

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

I have tried the above JavaScript, which does disable the link, while retaining right and middle button click actions which is what I want.

However, I have many links, each with a dynamically created ID and I cannot figure out how to pass the ID to the above code.

I have tried the following:

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()
  });

But it doesn't disable the link. I put an alert in and it does return the correct ID of the clicked link but does not disable it so I'm at a bit of a loss on how to proceed from here.

hmm `id`s are meant to be unique and used for one element only tho, have you tried using classes instead and looping through them to add the eventlistener? — coder, May 06 '21 at 08:47
Take a look at [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), dynamic ids are error prone and make a lot of unnecessary work. — Teemu, May 06 '21 at 08:50

score 0 · Answer 1 · answered May 06 '21 at 09:06

You can remove the unnecessary onClick event handler and go straight to displaying the ID with this script:

$(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>

Ivar · Accepted Answer · 2021-05-06T11:12:22.417

If you're okay with using event handler attributes, simply use onclick="return false;" and you're done.

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

If you want to use addEventListener(), then you'll need to be able to distinguish the elements that should not be able to redirect. You can use a selector like a[id^="img"] to select all anchor elements who's id attribute starts with img.
Then you need to select all elements that apply, loop over them, and add the event listener.

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>

Although it would probably be more clean and less error prone to add classes to your anchor tags that you want to prevent from redirecting and select those.

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>

I used your last example and added classes to my anchor tags - it works perfectly, awesome, thank you so much! — norfolk_uk, May 06 '21 at 09:18

Disabling a link using getElementById where there are many links that could be clicked

2 Answers2