javascript - 关于 iPad 中 CSS 悬停/鼠标悬停的问题

Question

假设一个页面上有 5 个子链接(具有类 searchBySub)和 5 个相应的按钮。

现在这 5 个子链接具有以下类定义

#leftNav .searchBySub {...}
#leftNav  a.searchBySub:hover {...}
#leftNav  a.searchBySubClick {...}

现在我正在 iPad 上测试这个页面。可以单击 5 个子链接中的任何一个来更改它的 CSS(offcourse 将单击的链接显示为选定的颜色)

此外，如果我点击任何相应的按钮，它应该会显示带有所选颜色的相应链接...我是通过点击此按钮的点击事件来实现的；

$(".button1").live("click",function(){
            $("link1").click(); //This is not exact code (but written dynamically...anyways it simulates the first link click)
        });

还有一件事，我无法显示确切的代码，因为每次单击链接/按钮时都会通过 AJAX 调用刷新内容，这就是我使用 jQuery.live() 进行绑定(bind)的原因...

现在我的问题是，在 iPAD 上，当我通过按钮点击模拟点击时，假设是 Button2，而当前选择了 link1，它会正确地将 link2 显示为所选颜色....但是由于某些原因，它在这个模拟点击期间显示了 link1 和悬停状态......我不知道为什么会发生这种情况......

请帮帮我。谢谢。

Answer 1

您可能想要捕获 touchstart 事件并对其执行操作。对于没有鼠标的移动设备，当有人点击屏幕时，您会收到一系列事件:

• touchstart
• touchend
• 鼠标按下
• mouseup
• 点击

mouse* 事件直到 touchend 之后才会发生，这可能不是您想要的行为。查看Apple's mobile Safari event docs了解更多信息: