2016-04-23 146 views
0

我有一个默认情况下隐藏的元素,并显示当用户鼠标悬停在这个元素上。在触摸屏上,只有在轻击元素时才会触发此事件。当我的手指触及那个元素时,我正在寻找的是一种让这个节目的方式,我似乎无法找到像这样的事件。事件触摸屏轻轻触摸

我曾尝试下面的代码:

//OnTouch event for about text 
$('#about thumbnail').on('touchstart', function(){ 
    $(this).find('.mask').addClass('touch'); 
}).on('touchend', function(){ 
    $(this).find('.mask').removeClass('touch'); 
}); 

没有成功要么,我有默认的WordPress的jQuery的包括在内,我需要一个额外的库使我的工作?我无法找到如何做到这一点。

谢谢你们!

回答

4

只要您没有为最新的具有3D触控功能的Apple iPhone进行开发,您就无法检测到轻微和难以接触的触摸。每个触摸输入都被视为点击。但您可以尝试减少响应时间延迟。 使用此库http://hammerjs.github.io/它有能力克服手机浏览器中的500ms锁定。 如果您减少响应时间,它可以稍微模拟您所要求的轻微触摸。

更新:这里是这里面提供了更多的活动,如 水龙头,单自来水,双击,按住另一个库,2个手指轻按,2X双击,刷卡拖动,旋转,捏,捏放,手指 http://quojs.tapquo.com

+0

感谢您的输入! aan'tap'(屏幕上的手指和lift手指)和touchstart(屏幕上的手指)之间有区别吗?请参阅我编辑的问题 –

+0

您是否检出了我提供的链接?可能会有帮助。 –

+0

@BorisKamp我忘了这件事。 http://quojs.tapquo.com/它具有多个事件支持,例如点击单击双击双击双击手指点击双击双击滑动拖动旋转双指捏出手指。 –

0

我忘了回到这里,但发现了一个解决方案,实现在触摸设备上的悬停效果。

你可以做什么:

1->通过触摸一个touchdevice对象实现悬停效果,直到您激活另一个悬停效果这个悬停效果保持活跃。您可以通过“touchstart”绑定到任何物体,像这样做:

$('body .archive-item').bind('touchstart', function() {}); 

我没有找到一种方法,只要你的手指与上述功能的触摸屏的获取停止悬停。

2->可以绑定touchstarttouchend上面的选择,让他们对touchstartremoveClassaddClasstouchend

$('body .archive-item').bind('touchstart', function() { 
    $(this).addClass('hover'); 
}); 
$('body .archive-item').bind('touchend', function() { 
    $(this).removeClass('hover'); 
}); 

现在你可以用CSS样式的.archive-item.hover实现悬停效果。

为了避免重复CSS实现对:hover悬停效果,你可以做到这一点的touchstart

.archive-item:hover, 
.archive-item.hover { 
    text-decoration: underline; 
    color: red; 
} 

我无法找到网络上的任何东西,所以这是我想通了,通过合并一些来自各种片段的代码,你们对此有何看法?