javascript - iPad 上的 CSS 问题

Question

我在 iPad 上有一个非常简单的 CSS 相关问题。 我有一组子链接，每个子链接都在 CSS 中定义为；

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

我有一个 JS 我已经定义了

$("#leftNav  a.searchBySub").live("touchstart",function(){...}
$("#leftNav  a.searchBySub").live("click",function(){...}

现在我的问题是，当我点击 iPad 上的任何子链接时，为什么它会应用 :hover 状态 CSS？我还能以某种方式改变这种行为吗？

在提出任何简单/基本建议之前请仔细阅读问题，因为我已经尝试了基本修复..

此外，在您说之前，iPad 上没有悬停事件，我知道这一点，但就我而言，单击链接时它确实应用了 :hover 状态类。

我知道你可能会说只是从 CSS 中删除 :hover 定义，但不幸的是我不能那样做，因为桌面浏览器也使用相同的 CSS(即使对于媒体查询，它也无济于事)

所以我的主要问题是如何在单击链接时覆盖 :hover 状态？

更新...

下面是我试过的代码；

    $("#leftNav  a.searchBySub").live("touchstart",function(){
                var a=document.getElementsByClassName("searchBySub");                 
                for(var i=0;i<a.length;i++)                 
                {                         
                a[i].ontouchstart=function(e){
 window.location=this.getAttribute("href");
                console.log("ontouchstart2");
                e.stopPropagation();                                 
                e.preventDefault(); 
                return false;}                 
                }
                $("#leftNav  a.searchBySub").removeClass("searchBySubClick");
                $(this).addClass("searchBySubClick");
                clickEvent($(this));
            });

Answer 1

Safari 手机按特定顺序处理事件:当您按下然后释放屏幕时，会发生以下情况:

ontouchstart - onmouseover/:hover - mousedown - mouseup - click/:active

请注意 onmouseout(:hover 状态结束)不会被调用，除非您点击其他地方。我花了一段时间才弄明白。

作为解决方法，您可以使用此类代码在 onmouseover 事件发生之前触发您的链接。

        function ipadLinksHack()//Call it onload
        {
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++)
                {
                        //Note to self: ontouchstart and not onclick! :)
                        a[i].ontouchstart=function(e)
                        {
                                window.location=this.getAttribute("href");
                                e.stopPropagation();
                                e.preventDefault();
                                return false;//Prevents the link default behavior
                        }
                }
        }

注意:当您处于“独立模式”(又名 webapp)并单击链接时，您还可以使用此代码段来阻止打开 safari。这是此功能的主要目的。 另外，阅读 event handling guide在官方文档上可能会有所帮助。