0

我想知道是否有一个简单的解决方案可以将悬停转换为 setTimeout 显示；悬停在设定的时间出现和消失；或实施双击解决方案以仅在双击时显示悬停状态。

我知道你可以使用 JavaScript 调用基于窗口大小的函数；使用类似于下面的东西。

if( $(window).width() > 768 ) {

但是有什么方法可以通过确定窗口大小（即智能手机/平板电脑。iOS / Android）来获取所有悬停状态，并将这些状态转换为在双击或一段时间内出现。然后他们消失了。

我希望我可以这样处理；而不是用这些解决方案重建我所有的移动元素。

4

2 回答 2

3

使用 Modernizr ( http://modernizr.com/download/ ) 来检测触摸设备。因此，悬停状态将仅适用于非触摸设备（桌面）。Modernizr 将添加.touch或.no-touch分类到您的html标签。然后，您可以执行以下操作：

CSS

.no-touch .class:hover { color: red; }
.touch .hover { color: red; }

.touch.hover仅在触摸设备上添加类|| 双击

SCSS

.class {
    .no-touch & {
        &:hover { color: red; }
    }
}

/* add class .hover on touch device only || doubleTap */  
.hover {
   .touch & { color: red; }
}

JAVASCRIPT || QuoJS || http://quojs.tapquo.com/

$$('.your-class').doubleTap(function() {
    $(this).toggleClass('hover');   
});
于 2013-04-15T16:04:24.630 回答
1

你的逻辑应该有点像这样。

if('ontouchstart' in document) // if it is a touch device
{
    var nStartTime = null;
    $("element").bind('touchstart', function ()
    {
        if(nStartTime && (new Date().getTime() - nStartTime) < 600) // if it is a second tap and it is within 600ms of the first tap, consider it as a double tap
        {
                $(this).trigger('mouseover');
                nStartTime = null;
        }            
        else //consider it as the first tap
        {
            nStartTime = new Date.getTime();
        }
    }
}
于 2013-04-07T19:27:38.853 回答