0

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.

2 respuestas 2

1

Podrías usar el evento click para obtener solamente la tarjeta en la que haces el click. Podrías seleccionar todas las .card y cuando la pantalla sea inferior a 900 ponerle un listener con el click tal que así:

  if (window.innerWidth < 900){
        btn_cards.forEach(button => {
        button.style.pointerEvents ='none';
        button.style.color='red';
        document.querySelectorAll(".card").forEach(el => {
        el.addEventListener("click", e => {
        var botonPorCard = e.querySelector('.content-btn-hover a');
        setTimeout(() => {
          botonPorCard.style.pointerEvents = null;
          botonPorCard.style.color='green';
               }, 2000);
            })
        })
   })

En las primeras lines del If, seteas todos los botones en rojo y sin el pointer. Luego le añades el listener click a todas las cards, y cuando el usuario haga click obtienes solo el botón de esa card mediante: var botonPorCard = e.querySelector('.content-btn-hover a'); y a continuación incluyes el timeout y vuelves a activar solo el botón de la card que ha clicado el usuario, sin que los demás se vean afectados.

Espero haberte ayudado, un saludo!

7
  • Hola, gracias por la respuesta, estoy probando y entendiendo el código pero presenta un error en la variable que creamos, con el valor del e.querySelector('content-btn-hover a'), por consola presenta el error de que e.querySelector is not a function, y cada vez que hago un click se repite este error y lo curioso es que el error ocurre 20 veces por cada click. Las cards tienen 2 botones, cada una. Commented el 24 jun. 2022 a las 0:39
  • Pudes pasar el código HTML para ver como tienes las clases? Commented el 24 jun. 2022 a las 7:07
  • Hola, listo, está en el post más arriba. Esa estructura se repite con otros datos 5 veces de momento. Ya que hay 5 cards Commented el 24 jun. 2022 a las 10:25
  • Prueba solo con e.querySelector('a'). O e.querySelector('.content-btn-hover > a'). Commented el 24 jun. 2022 a las 15:53
  • Y si persiste el fallo, prueba con querySelectorAll en vez de querySelector porque son dos botones. Pensaba que era 1 por card hasta ver el html jeje. Creo que va a estar ahí el fallo. Usa e.querySelectorAll('a') Commented el 24 jun. 2022 a las 16:01
1
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';
document.querySelectorAll(".card").forEach(el => {
el.addEventListener("touchstart", (e) => {
    console.log(e.currentTarget)
var botonesPorCard = e.currentTarget.querySelectorAll('a');
setTimeout(() => {
    botonesPorCard.forEach(card => {
        card.style.pointerEvents = null;
        card.style.color='green';
    })
       }, 2000);
    })
})
})
}

Hola! El siguiente código funciona a la perfección, en la anterior respuesta nos faltaban algunos detalles como por ejemplo: e.currentTarget.querySelectorAll('a') para seleccionar los enlaces del div con currentTarget! Porque e es simplemente el pointer Event.Y currentTarget selecciona el elemento que contiene el listener touchstart! Otra cosa que faltaba, recorrer el array de botones por card para añadirle los estilos a los dos botones. botonesPorCard.forEach(card =>

Lo he probado en mi pc con diferentes cards y solo se habilitan los botones de la card que tocas.

Disculpa por la anterior respuesta y espero haberte ayudado, un saludo!

5
  • 1
    Hola Carlos, agradecerte tu tiempo, el código funciona pero no del todo, cuando pulsas una tarjeta, pasa lo que tiene que pasar, botones desactivados, y a los 2 segundos se activan, pero si por ejemplo pulsas en otra, y luego vuelves a pulsar en la que lo hiciste anteriormente, esta ya tiene los botones activados, la idea es que se resetee toda la función y siempre ocurra lo del timeout. Actualmente solo ocurre en el primer click de la tarjeta. De todas formas empiezo a ver como se complica el código, tiene que a ver otras alternativas con css quizás. Gracias por tu tiempo nuevamente! Commented el 25 jun. 2022 a las 12:45
  • Pues simplemente pon las dos lineas que resetean todos los botones globales a la función click también. Entonces al hacer click, se resetean todas menos las que has pulsado? Entiendes? Debajo justo del settimeout pones otra vez las dos lineas: button.style.pointerEvents ='none'; button.style.color='red' y listo. Pero mantenlas arriba también Commented el 25 jun. 2022 a las 13:23
  • Sí eso fue lo que pensé e intenté, pero ocurre que que si lo hago donde dices, cuando hago click en el botón tras 2 segundos que no te deja, se vuelve a lanzar el evento touchstart y no te deja clickar nunca y si lo pongo por fuera del evento tampoco funciona, ya le he encontrado otra solución pero no tiene nada que ver con js, me estaba pareciendo demasiado tedioso, lo que he hecho ha sido al contenedor de botones ponerle un position absolute, con un bottom -10rem, y en hover ese bottom pasa a unos 40px Commented el 25 jun. 2022 a las 13:42
  • De esta forma los botones al hacer click en la tarjeta aparecen desde abajo con una transición tras 1 segundo del click, lo que provoca que el usuario no pueda hacer click en ellos accidentalmente ya que no aparecen dentro del contenedor. Para que aparezcan tienen que hacer click en la tarjeta primero. Commented el 25 jun. 2022 a las 13:46
  • 1
    Entiendo. Antes te lo he puesto mal, deberías ponerlo fuera del settimeout pero dentro del evento touch. Pero como veas! Un placer aprender y compartir conocimiento contigo! Commented el 25 jun. 2022 a las 13:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.