0

Eu tenho uma página responsiva pra fazer um e-commerce e tenho o seguinte código para adicionar ou remover quantidade:

// HTML
<a class="menos" class='fas fa-minus-circle'><i></i></a>
<p class="qtde">0</p>
<a class="mais" class='fas fa-minus-circle'><i></i></a>

// jQuery (estou usando o jQuery comum e não o jQuery mobile):
$(document).on('click', '.menos', function() {
    // Retira quantidade
});

$(document).on('click', '.mais', function() {
    // Soma quantidade
});

No PC e em celulares android funcionou. No iPhone não funcionou nem no Safari e nem no Chrome.

Em outros posts aqui no fórum sugeriram adicionar ao click a função touchstart e também usar mousedown no lugar do click e ficou assim:

$(document).on('click touchstart', '.mais', function() {
    // Soma quantidade
});
// ou
$(document).on('mousedown touchstart', '.mais', function() {
    // Soma quantidade
});

No PC normal.

No Android ele executou a função duas vezes seguidas (0-2-4 ...).

No iPhone aí que está, funcionou num iPhone X tanto no Safari quanto no Chrome mas não funcionou num iPhone 7 Plus tanto no Safari quanto no Chrome, todos os dispositivos estão atualizados e com os apps na mesma versão.

Como posso proceder?

2
  • Use button no lugar de a. A tag a é usada para navegação e não para alterar elementos.
    – Sam
    Commented 19/06/2019 às 16:45
  • Ola @Sam, realmente funcionou também! Precisei só modificar o CSS mas resolveu também! Muito Obrigado!
    – Donadon
    Commented 19/06/2019 às 17:15

1 Resposta 1

1

Provavelmente vai ter que usar o jQuery Mobile. Para que a execução não se repita, adicione um preventDefault() e stopPropagation()

$(document).on('click touchstart', '.mais', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Uma alternativa é usar Javascript mesmo:

<div class="menos" ontouchstart="touchStart(menos);"><i class='fas fa-minus-circle'></i></div>
<p class="qtde">0</p>
<div class="mais" ontouchstart="touchStart(mais);"><i class='fas fa-minus-circle'></i></div>
element.addEventListener("touchstart", touchStart, false);
function touchStart(event) {
  // executa o evento
}
2
  • Douglas, muito obrigado pela sua colaboração! Eu não conhecia a atuação do preventDefault() e do stopPropagation(). Realmente com javascript puro foi possível fazer também!!!! Eu nunca trabalhei o JQuery Mobile, eu tenho que fazer alguma verificação se o site está no navegador do PC ou do Celular???????? Porque estou usando Bootstrap para cuidar da parte de ser responsivo.
    – Donadon
    Commented 19/06/2019 às 17:12
  • Não precisa, basta inserir no código a chamada do jQuery Mobile e ele vai atuar sozinho quando tiver que executar Commented 19/06/2019 às 17:38

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 .