Stackoverflow对当前版本的帮助太大了,但目前我完全迷失了,因为我不知道如何解决一个问题.我会非常感谢任何建议.
我有带参数的产品容器.它们出现在鼠标上:悬停(用css完成).问题是如果有人会点击移动设备,它会触发两个事件:点击和鼠标悬停.但我需要不同的移动设备行为.所以我使用了stackoverflow的解决方案,我可以检查浏览器是否知道touchstart事件.它工作正常,直到有人会带有可触摸的屏幕,但使用鼠标.因此,此用户将单击容器,参数将显示,而不会重定向到产品详细信息.但是鼠标行为是错误的.
我需要的是,如果有人点击图像,它将首先显示参数,并在第二次点击它将重定向到产品细节(不同的行为只在点击按钮,自动重定向用户到产品细节).但如果有人会使用鼠标,我们有:悬停效果,所以即使首次点击图像也可以将用户重定向到产品详细信息页面.
当前的javascript代码已注释,因此有解决方法在桌面和移动设备上运行正常.但它不适用于带有鼠标触摸屏的混合设备.评论代码就是我对解决方案的看法,因为我在其中添加了使用mouseenter/mouseleave函数的解决方法.这不适用于移动设备,因为它们也会触发这些事件.同样的问题是touchstart/touchend事件.
请帮忙吗？
/*var usedMouse = false;
$('.products-grid .container:not(.over)').mouseenter(function() {
usedMouse = true;
});*/
$('.products-grid .container:not(.over)').tap(function(e) {
if (!!('ontouchstart' in window)/* && !usedMouse*/) {
// location change if already hovered or tap target is button
if ($(this).hasClass('over') || $(e.target).hasClass('button')) {
$(this).addClass('detail'); // add detail - disable hover effect on actual container
return true;
}
e.preventDefault();
e.stopPropagation();
$('.products-grid .container').removeClass('over'); // remove all over effects
$(this).addClass('over'); // add over effect to actual container
return false; // do nothing because script …