悬停转换为超时显示或点击双击

时间:2013-04-07 19:02:29

标签: javascript jquery css3 mobile responsive-design

我想知道是否有一个简单的解决方案,我可以将悬停转换为setTimeout显示;徘徊在设定的时间出现和消失的地方;或者实现doubletap解决方案,仅在doubletap上显示悬停状态。

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

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

但有没有办法可以通过确定窗口大小(即智能手机/平板电脑.iOS / Android)来抓取所有悬停状态,并将这些状态转换为双击或出现一段时间。然后他们消失了。

我希望我能以这种方式接近这一点;与使用这些解决方案重建移动设备的所有元素相反。

2 个答案:

答案 0 :(得分:3)

使用Modernizr(http://modernizr.com/download/)来检测触控设备。因此,悬停状态仅适用于无触摸设备(桌面)。 Modernizr会将.touch.no-touch类添加到您的html标记中。然后,你可以这样做:

<强> CSS

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

.touch仅在触控设备上添加课程.hover || doubleTap

<强> 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');   
});

答案 1 :(得分: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();
        }
    }
}