JavaScript：onclick 函数更改另一个元素 onclick

Question

Intended Functionality

I'm looking for something that operates like this:

1. User clicks on the img
2. handclick function gets called and 'enables' the parent anchor of the img
3. If clicked again, the anchor will redirect the user to a new page

---

My Issue:

The below does 'enable' the link, but it also acts as if the link was clicked at the same time.

Is there any way to fix this functionality?

HTML Code:

<a href="@Url.Action("Index/" + @card.ID)" onclick="return false;" class="link">
    <img src="~/Resources/@card.Image" id="@card.ID" onclick="handClick(@((int)card.Value), @card.ID)" class="card" />
</a>

JavaScript Code

function handClick(cardValue, cardID) {
    *... irrelevant code ...*
    var playedCard = document.getElementById(cardID);
    *... irrelevant code ...*
    playedCard.parentElement.onclick = function () { return true };
}

Answer 1

Since I don't know what the irrelevant code is I'll stay only on the first click enable issue.

My approach includes the href attribute. without it the link doesn't work. So, what I did was change the attribute's name into something else and when clicked, replace it with the actual attribute, thus "activating" the link.

Notice that the cursor changes into a pointer after the first click.

 document.querySelectorAll('a[hrefx]').forEach(function(el) { el.addEventListener('click', function() { // This condition enable re-using the listener for other purposes. if (this.getAttribute('hrefx')) { this.setAttribute('href', this.getAttribute('hrefx')); this.removeAttribute('hrefx'); } }); });

 <a hrefx="#"> <img src="https://picsum.photos/200"> </a> <a hrefx="#"> <img src="https://picsum.photos/200"> </a>