我想知道是否有一个简单的解决方案,我可以将悬停转换为setTimeout显示;徘徊在设定的时间出现和消失的地方;或者实现doubletap解决方案,仅在doubletap上显示悬停状态。
我知道您可以使用JavaScript调用基于窗口大小的函数;使用类似于下面的东西。
if( $(window).width() > 768 ) {
但有没有办法可以通过确定窗口大小(即智能手机/平板电脑.iOS / Android)来抓取所有悬停状态,并将这些状态转换为双击或出现一段时间。然后他们消失了。
我希望我能以这种方式接近这一点;与使用这些解决方案重建移动设备的所有元素相反。
答案 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();
}
}
}