1

Olá! Em meu código o console me exibe o seguinte erro: Uncaught TypeError: d.addEventListener is not a function, faço uso do JQuery. Já troquei o addEventListener por on, não me retorna erro, porém o código não funciona.

Segue a minha função:

function clickOnIndices(carrosselPai) {
var carouselIndice = carrosselPai.find('.indice');
var carousel = carrosselPai.find('.carousel');
carouselIndice.click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var indice = $this.data('indice');

    if( ! $this.hasClass('active') ) {
        carouselIndice.removeClass('active');
        $this.addClass('active')
    }

    if( indice === 0 ) {
        carousel.css('left', 0);
    } else  {
        carousel.css('left', '-' + indice + '00%');
    }
});
carouselIndice.eq(0).click();

// Touch Events
carrosselPai.addEventListener("touchstart", handleStart, false);
carrosselPai.addEventListener("touchmove", handleMove, false);
carrosselPai.addEventListener("touchcancel", handleCancel, false);
carrosselPai.addEventListener("touchend", handleEnd, false);

var posIniX = 0;
var posFimX = 0;
var posIniY = 0;
var posFimY = 0;
var changePage = false;
function handleStart(evt) {
    posIniX = evt.touches[0].pageX;
    posIniY = evt.touches[0].pageY;
    changePage = false;
    console.log(evt);
}
function handleMove(evt) {
    posFimX = evt.touches[0].pageX;
    posFimY = evt.touches[0].pageY;
    changePage = true;
}
function handleEnd() {
    var scrollActive = carrosselPai.find('.indice.active');
    if( changePage) {
        var difX = (posIniX - posFimX);
        if( difX > 50 ) {
            // Move para direita
            scrollActive.next('.indice').click();
            changePage = false;
        } else if( difX < -50 ) {
            // Move para esquerda
            scrollActive.prev('.indice').click();
            changePage = false;
        } else {
            scrollActive.find('.scroll').click();
            return false;
        }
    }
    changePage = false;
}
function handleCancel() {
    changePage = false;
}

}

function commentsCarousel (carrosselPai, qtdeToShow) {
if(carrosselPai.length) {
    var carousel = carrosselPai.find('.carousel');
    var tamUtil = carrosselPai.width();
    qtdeToShow = qtdeToShow || 3;
    var qtdeItems = carousel.find('.item').length;

    // Verifica se a divisão ficará correta
    for(; (qtdeItems % qtdeToShow) !== 0;){
        qtdeItems++;
    }

    var tamTotalPai = (qtdeItems * tamUtil) / qtdeToShow;
    var percentualTotal = (tamTotalPai * 100) / tamUtil;
    var tamItem = tamTotalPai / qtdeItems;
    var percentualUni = (tamItem * 100) / tamTotalPai;

    carousel.css('width', percentualTotal + '%');
    carousel.find('.item').css('width', percentualUni + '%');

    // Coloca os indices
    for (var i = 0; i < (percentualTotal / 100); i++) {
        carrosselPai.append('<a class="indice" href="#" data-indice="'+ i +'"></a>');
    }

    clickOnIndices(carrosselPai);
}

}

commentsCarousel($('#carousel'), 1);
2
  • Em que momento você chama a função clickOnIndices?
    – Woss
    23/05/2019 às 12:50
  • Olá @AndersonCarlosWoss, atualizei meu código para uma visualização completa. Espero ter melhorado :) 23/05/2019 às 13:04

2 Respostas 2

2

Você pode utilizar o evento on do jQuery. Assim:

carrosselPai.on("touchstart", function(e){ handleStart(e); });
carrosselPai.on("touchmove", function(e){ handleMove(e); });
carrosselPai.on("touchcancel", function(e){ handleCancel(e); });
carrosselPai.on("touchend", function(e){ handleEnd(e); });

Passando, assim, os eventos para suas respectivas funções

1
  • 1
    Huum, eu havia usado o 'on' na mesma estrutura do addEventListener por isso não funcionava. Obrigada pela resposta :) 23/05/2019 às 13:26
-1

Tenta isso

// Touch Events carrosselPai[0].addEventListener("touchstart", handleStart, false); carrosselPai[0].addEventListener("touchmove", handleMove, false); carrosselPai[0].addEventListener("touchcancel", handleCancel, false); carrosselPai[0].addEventListener("touchend", handleEnd, false);

1
  • Olá @mcmartin, não funcionou, existe somente um elemento na página. Mas obrigada pela ajuda :) 23/05/2019 às 13:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .