13

我正在为台式机和移动设备创建一个响应式网站。我有一个悬停和单击事件问题，我不确定如何为移动设备上的用户解决。

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

现在，在移动设备上，当用户点击框时，第二个框会向下滑动。但实际点击链接需要第二次点击。我为其创建此内容的公司要求，在移动设备上，当用户点击一个框时，第二个框将向下滑动，并在 2 秒延迟后自动将它们发送到指定页面。这样，用户只需点击一次。

我不知道如何使这项工作。我曾考虑过使用 jQuery mobile，但我无法找到绕过第一次点击（移动设备将其视为悬停事件）并激活链接的方法。

谢谢

4

3 回答 3

16

我同意@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
}
于 2012-08-29T21:58:39.833 回答
2 
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");
                });
        });
}
于 2013-09-19T09:51:22.017 回答
1

尝试使用 jQuery 来监听移动设备的touchstart和touchend事件。

前任：

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

希望这可以帮助。

于 2012-08-29T21:48:25.150 回答