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

Posted 2023-03-12

【中文标题】如何防止我的触摸设备执行 ::hover 而不是点击功能？

【英文标题】：How do I prevent my a touch device from executing an ::hover instead of a click function?

【发布时间】：2015-11-10 10:14:14

【问题描述】：

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

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

除了第一次点击之外，一切都很好，它不执行我的单击功能，而是执行 ::hover。第一次点击后，一切正常。

这是一些代码

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

function toggleTouchClass()

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

当文档准备好时调用init。

提前致谢。

【参考方案1】：

您应该在触控设备上订阅touchstart 事件：

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