Hola tengo el siguiente código JS
const card_portfolio = document.querySelectorAll('.card')
const btn_cards = document.querySelectorAll('.content-btn-hover a')
if (window.innerWidth < 900){
btn_cards.forEach(button => {
button.style.pointerEvents ='none';
button.style.color='red'
card_portfolio.forEach((card) => {
card.addEventListener('touchstart', () =>{
setTimeout(() => {
button.style.pointerEvents = null;
button.style.color='green';
}, 2000);
})
})
})
}
Tengo unas tarjetas las cuales incluyen unos botones que son enlaces con la etiqueta <a href="destino" target="_blank>
, y la idea es que en dispositivos menores de 900px, (móviles y tablets), al hacer click o tocar en la card, que es el contenedor de todo, los enlaces que gracias a este código por defecto están desactivados, cuando pasan unos segundos tras tocar, estos se activan. Esa es la idea.
El código funcionar funciona, pero solamente 1 vez, y yo quiero que cuando se pulse en cualquier tarjeta, ocurra este efecto.
Si lo hago una vez, y pulso en cualquier otra tarjeta, ya tiene el efecto activado y puedes clickar en el enlace inmediatamente, no busco eso.
¿Cómo podría hacerlo?
Edito con el código html
<div class="card boxi3">
<div class="picture-wrapper">
<img src="img/cafete_img.PNG" alt="LaCafeteria"></a>
</div>
<div class="content-wrapper">
<h4>La Cafetería</h4>
</div>
<div class="content-wrapper-hover">
<div class="content-text-hover">
<p>
Proyecto hecho desde 0 usando <span class="sass-color">Sass</span> junto con <span class="gulp-color">Gulp</span>, recomiendo ver como está el proyecto organizado en GitHub. Demo completamente Responsive.
</p>
</div>
<div class="content-btn-hover">
<a href="destinoFicticio" target="_blank">Ver en GitHub<i class="fa fa-chevron-right"></i></a>
<a href="destinoFicticio" target="_blank">Ver Demo <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
Un saludo y gracias de antemano.