Intended Functionality
I'm looking for something that operates like this:
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 };
}
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>