Кнопка на мобильном не реагирует так же, как на рабочем столе

Question

Моя проблема может показаться простой, но я действительно застрял с ней. Вот ссылка: https://codepen.io/anon/pen/VqyMpj

Кнопка работает потрясающе, как есть, но когда вы открываете ее на мобильном телефоне и нажимаете на нее - она ​​не работает как на рабочем столе, она не возвращается к своей первоначальной форме (просто остается с x в конце ).

Мне нужно, чтобы он работал на мобильных устройствах так же, как и на рабочем столе.

Может быть, проблема в setTimeout?

Вот мой код JS:

(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);

Answer 1

После нескольких попыток вот что сработало для меня:

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();
}

Отсюда: https://jsfiddle.net/dkz17jc5/19/

Answer 2

На мобильных устройствах у вас есть touch события.Вы можете использовать touchend во многих местах, где вы зарегистрировали бы click.

Добавьте ключевое слово touchend к тому, что проверять в вашем document.ready, например:

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

Answer 3

Попробуйте этот код - у вас странные результаты в вашем

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

Answer 4

Мобильные устройства применяют псевдокласс :hover, когда вы касаетесь элемента, и не удаляйте его, пока вы не коснетесь другого элемента.