Funcionalidad prevista
Estoy buscando algo que funcione así:
Mi problema:
Lo siguiente 'habilita' el enlace, pero también actúa como si se hiciera clic en el enlace al mismo tiempo.
¿Hay alguna forma de arreglar esta funcionalidad?
Código HTML:
<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>Código JavaScript
function handClick(cardValue, cardID) { *... irrelevant code ...* var playedCard = document.getElementById(cardID); *... irrelevant code ...* playedCard.parentElement.onclick = function () { return true }; }Como no sé cuál es el código irrelevante, me quedaré solo en el problema de habilitar el primer clic.
Mi enfoque incluye el atributo href . sin ella el enlace no funciona. Entonces, lo que hice fue cambiar el nombre del atributo a otra cosa y cuando se hizo clic, lo reemplazó con el atributo real, "activando" así el enlace.
Observe que el cursor cambia a un puntero después del primer clic.
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>