javascript - 如何防止我的触摸设备执行::hover 而不是点击功能？

Question

好吧，这可能是一个常见问题，但我目前还没有找到解决方案。

我的网站上有一个磁贴，实际上是一个 div 容器，如果我在触摸设备上单击它，我想在其中添加一个“触摸”类。

除了在第一次点击时一切正常，它不执行我的点击功能，而是执行::hover。第一次点击后，一切都按预期进行。

这是一些代码

function init() {
        $tile.on('click', toggleTouchClass );
    }

function toggleTouchClass(){

        if( $('html').hasClass('isTouch') ){
            $tile.toggleClass('touched');
        } else{
            return
        }
    }

当然，当文档准备好时会调用 init。

提前致谢。

Answer 1

您应该在触摸设备上订阅 touchstart 事件:

var isTouchDevice = ... // You can check ontouchstart in window object or use Modernizr.touch to set this
$tile.on(isTouchDevice ? 'touchstart' : 'click', function() {
    ...
});