2

Tengo un carrusel el cual uso el evento mousewheel DOMMouseScroll para moverlo con la rueda del mouse, uso el siguiente condicional para detectar si se mueve la rueda hacia arriba o hacia abajo.

event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0

Funciona bien pero cuando muevo rápido la rueda del mouse ocurre muchas veces el evento y se buguea el carrusel.

Como puedo hacer para bloquear el evento se bloquee de alguna forma mientras finaliza la animación de mi carrusel.

Este el codigo completo del evento que llamo.

$(document).on('mousewheel DOMMouseScroll', "#"+id+" .element", function(event){
    event.preventDefault();

    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {

        remove_styles();
        $("#"+id+" .content_carrusel ."+actual_record).addClass('previous');
        $("#"+id+" .content_carrusel ."+new_element(1)).addClass('actual');
        $("#"+id+" .bullet ."+actual_record).addClass('active');

        var init = new_element(1);

        setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('card_next');}, 50);
        setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('next'); }    , 100);
        new_element(-1);
    }
    else
    {
        remove_styles();
        $("#"+id+" .content_carrusel ."+actual_record).addClass('next');
        $("#"+id+" .content_carrusel ."+new_element(-1)).addClass('actual');
        $("#"+id+" .bullet ."+actual_record).addClass('active');

        var init = new_element(-1);

        setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('card_previous');}, 50);
        setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('previous');  }   , 100);
        new_element(1);
    }
});
4
  • ¿Por qué esos timeouts? Me parece que el problema está ahí el 8 feb. 2019 a las 16:15
  • @PabloLozano Los necesito para que la transición salga bien, si no aparecen cada elemento de golpe el 8 feb. 2019 a las 16:16
  • ¿Y esos 50 o 100 milisegundos se aprecian? Me parece que afectan al orden de ejecución y te descoloca todo. Aunque sin verlo funcionar no estoy 100% seguro el 8 feb. 2019 a las 16:56
  • @PabloLozano Si se aprecian, aunque por ser tan poco uno pensaria que no pero son necesarios para que funcione como debe el 8 feb. 2019 a las 17:33

1 respuesta 1

1

Encontre una solución en esta pregunta del foro en ingles. Básicamente es el uso de la propiedad css pointer-events, de tal forma que el código quedaría de esta forma.

$(document).on('mousewheel DOMMouseScroll', "#"+id+" .element", function(event){
   $("#button_id").css("pointer-events", "none");

   // Codigo

   $("#button_id").css("pointer-events", "auto");
}

En mi caso tambien tuve que hacer un uso del setTimeout para retrasar 1 segundo. Pero esta solución me funciono como necesito

Tu Respuesta

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

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