悬停并单击移动设备上的事件

问题描述：

我正在为桌面设备和移动设备创建响应网站。我有一个悬停和点击事件，我不知道如何解决移动设备上的用户问题。悬停并单击移动设备上的事件

在网站上，我有一个包装在链接中的框（div）。在桌面上，当用户将鼠标悬停在桌面上时，带有文本内容的不同颜色的框会在第一个框中向下滑动。当用户点击框时，链接将它们带到指定页面。我为此使用jQuery。

现在，在移动设备上，当用户点击盒子时，第二个盒子滑落。但它需要第二次点击才能真正遵循链接。我为此创建的公司已经要求，在移动设备上，当用户点击一个框时，第二个框会向下滑动，延迟2秒后，它会自动将它们发送到指定页面。这样，用户只需点击一次。

我不知道如何使这项工作。我想过使用jQuery手机，但我找不到一种方法来绕过第一次点击（哪些移动设备像悬停事件一样对待），然后激活链接。

感谢

哇，听起来真的很烦人。当然，客户需要客户的需求，但自动重定向是（恕我直言）有点不好的设计。 – DZittersteyn

答

我同意@DZittersteyn关于这是一个糟糕的设计的事实。您可以更好地在移动设备上默认显示内容，以便点击者知道他点击的内容。

if(!!('ontouchstart' in window)){//check for touch device 
    $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners 
    $('myElement').on('click',function(){ 
    //slide down code 
    setTimeout(function(){ 
     window.location.href='asdasd.html'; 
     },2000); 
    }); 
}

，或者您可以使用

if(!!('ontouchstart' in window)){//check for touch device 
//behaviour and events for touch device 
} 
else{ 
//behaviour and events for pointing device like mouse 
}

什么！意思？这不等同于不是，或者完全没有。 – Bryan

http://*.com/questions/4686583/can-someone-explain-this-double-negative-trick – sabithpocker

答

尝试使用jQuery听touchstart和touchend事件移动。

EX：

$('selector').bind('touchstart', function(){ 
    //some action 
}); 
$('selector').bind('touchend', function(){ 
    //set timeout and action 
});

希望这有助于。

答

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) { 
    $(".touch") 
     .bind("touchstart", function() { 
      $(this) 
       .addClass("active") 
       .bind("touchend", function() { 
        $(this).removeClass("active"); 
       }); 
     }) 
     .bind("touchenter", function() { 
      $(this) 
       .addClass("hover") 
       .bind("touchleave", function() { 
        $(this).removeClass("hover active"); 
       }); 
     }); 
}

悬停并单击移动设备上的事件

相关推荐