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

移动设备在触摸某个元素时会应用:hover伪类，并且在您触摸其他元素之前不要将其删除。

Answer 2

尝试此代码-您的投资回报率很奇怪

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

Answer 3

经过几次尝试，这对我有用：

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 4

在移动设备上，您有touch个事件。您可以在注册touchend的许多相同位置使用click。

将touchend关键字添加到document.ready中要检查的内容中，如下所示：

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

移动设备上的按钮与台式机上的按钮没有反应

4 个答案: