0
votes

Le bouton ne réagit pas sur le mobile comme sur le bureau

Mon problème peut paraître simple mais je suis vraiment coincé avec lui. Voici un lien: https://codepen.io/anon/pen/VqyMpj

Le bouton fonctionne à merveille tel quel, mais lorsque vous l'ouvrez sur un mobile et que vous cliquez dessus - il ne fonctionne pas comme sur le bureau, il ne revient pas à sa forme d'origine (reste simplement avec x à la fin).

J'en ai besoin pour fonctionner sur mobile comme sur ordinateur.

Peut-être que le problème vient de setTimeout?

Voici mon code JS: p >

(function () {
    var removeSuccess;

    removeSuccess = function () {
        return $('.btn-cart').removeClass('success');
    };

    $(document).ready(function () {
        return $('.btn-cart').on("click", function () {
            $(this).addClass('success');
            return setTimeout(removeSuccess, 1000);
        });
    });

}).call(this);

javascript html css mobile button

2 commentaires

Le problème n'a rien à voir avec le code de votre question. Cela dépend entièrement de votre CSS et de votre HTML. Fournissez toujours un exemple minimal reproductible dans la question elle-même .

De plus, vos retours n'ont aucun sens

4 Réponses :

0
votes

Les appareils mobiles appliquent la pseudo-classe : hover lorsque vous touchez un élément, et ne le supprimez pas tant que vous n'avez pas touché un autre élément.

1 commentaires

Merci, j'ai pensé que c'était peut-être le cas. Mais que faire maintenant?

-1
votes

Sur les appareils mobiles, vous avez des événements touch . Vous pouvez utiliser touchend dans de nombreux endroits où vous enregistrez un clic .

Ajoutez un mot-clé touchend aux éléments à vérifier pour dans votre document.ready comme ceci:

 $(document).ready(function () {
        return $('.btn-cart').on("click touchend", function () {
            $(this).addClass('success');
            return setTimeout(removeSuccess, 1000);
        });
    });

0 commentaires

0
votes

Essayez ce code - vous avez des retours étranges dans le vôtre

$(function() { // on page load
  $('.btn-cart').on("touchstart click", function() {
    $(this).addClass('success');
    setTimeout(function() {
      $('.btn-cart').removeClass('success');
    }, 1000);
  });
});

0 commentaires

0
votes

Après quelques essais, voici ce qui a fonctionné pour moi:

function watchForHover() {
    var hasHoverClass = false;
    var container = document.body;
    var lastTouchTime = 0;

    function enableHover() {
        // filter emulated events coming from touch events
        if (new Date() - lastTouchTime < 500) return;
        if (hasHoverClass) return;

        container.className += ' hasHover';
        hasHoverClass = true;
    }

    function disableHover() {
        if (!hasHoverClass) return;

        container.className = container.className.replace(' hasHover', '');
        hasHoverClass = false;
    }

    function updateLastTouchTime() {
        lastTouchTime = new Date();
    }

    document.addEventListener('touchstart', updateLastTouchTime, true);
    document.addEventListener('touchstart', disableHover, true);
    document.addEventListener('mousemove', enableHover, true);

    enableHover();
}

De là: https://jsfiddle.net/dkz17jc5/19/

0 commentaires