关于jquery：移动设备上的悬停和点击事件


Hover and click event on mobile devices

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

在站点上，我有一个包装在链接中的框(DIV)。在桌面上，当用户悬停在它上面时，一个不同颜色的文本内容框会在第一个框上向下滑动。当用户单击该框时，链接会将其带到指定的页面。我正在使用jquery进行此操作。

现在，在移动设备上，当用户点击盒子时，第二个盒子就会滑下来。但要真正跟踪链接需要第二次点击。我创建此应用程序的公司要求，在移动设备上，当用户点击一个框时，第二个框将向下滑动，经过2秒钟的延迟后，它将自动将其发送到指定的页面。这样，用户只需点击一次。

我不知道该怎么做。我考虑过使用jquery mobile，但我无法找到绕过第一个tap(移动设备将其视为悬停事件)并激活链接的方法。

谢谢

相关讨论

我同意@Dzittersteyn的观点，因为这是一个糟糕的设计。你可以在默认情况下在手机中显示内容，这样点击的人就知道他点击了什么。

1
2
3
4
5
6
7
8
9
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);
    });
}

或者你可以使用

1
2
3
4
5
6
if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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");
                });
        });
}

尝试使用jquery收听移动设备的touchstart和touchend事件。

前任：

1
2
3
4
5
6
$('selector').bind('touchstart', function(){
  //some action
});
$('selector').bind('touchend', function(){
  //set timeout and action
});

希望这有帮助。