iPad悬停/点击问题 [英] iPad hover/click issue

问题描述

我的HTML代码为

<a href="someTarget.html" class="menuLink">Link</a>

现在以前的JS代码是;

Now the JS code previously was;

$(".menuLink").mouseover(function(){
    //code for show() submenu
}


$(".menuLink").mouseout(function(){
    //code for hide() submenu
}

我正在iPad上对其进行测试，以上代码在iPad上运行良好(即，在第一次点击时，它会触发悬停事件并显示子菜单，只有在下次点击时，它才会触发click事件或转到目标链接)

I am testing this on iPad and the above code worked fine on the iPad (i.e. on first tap, it fires the hover event and shows the submenu and only on the next tap does it fire the click event or go to the target link)

由于某种原因(增加了主菜单的延迟)，我不得不按如下方式更新代码；

For some reason (adding delay to the main menu), I had to update the code as follows;

$this.hover(
    function(){ // over
        $this.data("timer", setTimeout(show, 500));
    },
    function(){ // out
        $this.data("timer", setTimeout(hide, 500));
    }
)

因此，问题如下； 在链接的第一次点击时，它将立即将用户带到目标URL(而不是之前的2次点击以进行悬停/点击)

So the Issue is as follows; On the first tap of the link, it immediately takes the user to the target URL (instead of 2 taps earlier for hover/click)

请帮助我解决此问题.

推荐答案

jQuery 文档说，$(selector).hover(handlerIn, handlerOut)只是使用$(selector).mouseenter(handlerIn).mouseleave(handlerOut)的快捷方式.

jQuery documentation says that $(selector).hover(handlerIn, handlerOut) is just a shortcut for using $(selector).mouseenter(handlerIn).mouseleave(handlerOut).

这意味着没有mouseover()/mouseout()事件绑定到该对象，并且移动浏览器可能无法正确处理其他两个事件(即mouseenter()/mouseleave()).

That means there is no mouseover()/mouseout() event binded to the object and maybe the mobile browser doesn't handle it correctly for the other 2 events (that is mouseenter()/mouseleave()).

尝试将您的代码替换为此:

Try replacing your code to this:

$this.mouseover(function(){ // over
        $this.data("timer", setTimeout(show, 500));
    }).mouseout(function(){ // out
        $this.data("timer", setTimeout(hide, 500));
    }
)

让我知道是否能解决问题.

Let me know if that does the trick.

这篇关于iPad悬停/点击问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！