Javascript 触摸屏用户必须点击链接两次，它才能工作

我有一个下拉菜单，通常会在悬停时下拉，但在触摸设备上，我只是简单地创建了它，以便您也可以单击打开它

问题是，下拉的

似乎没有完全聚焦，因为我必须在iPhone4上单击两次链接才能使它们正常工作

以下是我正在使用的代码：

$(document).ready(function() {

    $('.myMenu > li').bind('mouseover', openSubMenu);
    $('.myMenu > li').bind('mouseout', closeSubMenu);
    $('.myMenu > li').bind('click', toggleSubMenu);

    /* Also tried, currently using:
    $('.myMenu > li').bind('tap', toggleSubMenu);
    */

    function openSubMenu() {
        $(this).find('ul').addClass("hovered");
    };

    function closeSubMenu() {
        $(this).find('ul').removeClass("hovered");
    };

    function toggleSubMenu() {
        $(this).find('ul').toggleClass("hovered").focus();
    };

});

.focus（）

是我尝试添加的修复程序。它没有破坏代码，但也没有修复它。我知道有几件事我可以做，使它更好的触摸设备，但现在，点击方法是我坚持的

顺便说一下：

.hovered{
    opacity:1 !important;
    visibility: visible !important;
}

HTML设置基本上是

中的
设置，就像您从下拉菜单中所期望的那样。如果你出于某种原因想要标记，就这么说，我会添加它

编辑：这是我正在工作的网站的链接：

编辑：我刚才注意到一些你可能会觉得有用的附加信息。第一次单击链接时，当我第一次单击子链接时（我第一次单击以显示下拉列表的链接），该链接上的CSS就像它处于悬停状态一样（as:hover）。这就是为什么我认为这是一个焦点问题

编辑：根据请求编辑HTML标记：

<ul class="myMenu">
        <li><a href="/"><span class="icon-home"></span> Framside</a></li>
        <li><a href="#" id="nbutikk"><span class="icon-cart"></span> Butikk</a>
            <ul>
                <li><a href="/sand"><span class="icon-cart"></span> Sand</a></li>
                <li><a href="/sauda"><span class="icon-cart"></span> Sauda</a></li>
               <li><a href="http://kontorhandel.no"><span class="icon-cart"></span> Nettbutikk</a></li>
            </ul>
        </li>
        <li><a href="#" id="nit-tjenester"><span class="icon-console"></span> IT Tjenester</a>
           <ul>
                <li><a href="/driftsavtale"><span class="icon-console"></span> Driftsavtale</a></li>
                <li><a href="/asp_vps"><span class="icon-console"></span> ASP & VPS</a></li>
                <li><a href="/overvaking"><span class="icon-console"></span> Overvåking</a></li>
                <li><a href="/nettverk"><span class="icon-console"></span> Nettverk</a></li>
            </ul>
        </li>
        <li><a href="#" id="nsupport"><span class="icon-info"></span> Support</a>
           <ul>
                <li><a href="/fjernsupport"><span class="icon-info"></span> Fjernsupport</a></li>
                <li><a href="/utskrift_asp"><span class="icon-info"></span> Utskrift ASP</a></li>
                                    <li><a href="/rdp_rycloud"><span class="icon-info"></span> RDP: Rycloud</a></li>
                <li><a href="teamviewer_host"><span class="icon-info"></span> TeamViewer Host</a></li>
                                </ul>
        </li>
        <li><a href="/kontakt"><span class="icon-mail"></span> Kontakt Oss</a></li>
    </ul>

不要使用Jquery的click事件，而是尝试如下的tap事件

$('.myMenu > li').bind('tap', toggleSubMenu);

当鼠标悬停在子菜单中的链接上时，父列表项的状态会发生变化

但是，在iOS中，当您单击子菜单中的链接时，它检测到父列表项状态需要更改，因此它不是执行点击，而是更改项的状态，这就是为什么它需要第二次点击。（我希望这是有道理的）

要切入重点，请确保父列表项中没有状态更改。将鼠标悬停在其上时与将鼠标悬停在子菜单链接上时保持相同

我还没有测试过这些，当我不使用代码时会很困难，但可能的解决方案如下：

您可以使用jQuery并检测触摸端，这不是最好的解决方案，但应该可以：

另一种方法是使用CSS保持状态不变，这样可以防止Safari检测到状态的变化。（我删除了我的CSS答案，因为它不起作用）
阅读以下内容：

但是如果一个可点击的元素也在鼠标悬停上做了一些事情，那么点击该元素将触发鼠标悬停事件，而不是点击。再次点击同一元素将产生点击事件

如果您有鼠标悬停事件，iOS（可能是其他操作系统）将在初次单击时触发该事件，而不是实际的单击事件。我会在你的JS中添加一些警报，看看在最初的点击中调用了哪个事件
 我忘了我在哪里找到这个解决方案，但使用jQuery我做了类似的事情，它似乎做到了：

$(document).ready(function() {
    $('a,input').bind('touchend', function() {});
});

我以前使用“touchstart”，但“touchend”似乎工作得更好。
出于某种原因，我仍然需要点击两次才能转到链接。我也会在我正在处理的页面上添加一个问题的链接。我相信还有一个“touch”或“touchstart”以及tap，也许其中一个会起作用。tap事件不仅仅适用于jquery mobile吗？你也可以尝试绑定到“vclick”事件，它应该“做正确的事情”在任何客户端中，您可以将html标记作为well@V31当然，我现在加了：）好的，我想我明白了。如果你有任何快速的建议，我将如何着手解决这个问题？我喜欢你的答案。非常具有描述性，我学到了很多，这让我感觉不那么愚蠢。老实说，如果我能给你10票，我会的。我只想提醒可能有这个问题的人，CSS由于某种原因不起作用，但是当我将选择器更改为“.myMenu li ul li a”时，jQuery起作用了。他们为什么要实现这个呢？Jeeze让我们回到使用flash，如果他们要为我们做这样的任意决策的话。它完全打破了许多标准的行业实践模型，显然，您必须用JAVASCRIPT“修复”这些模型。见鬼，我不建议用JS解决这些问题。解决这些问题的根本是了解iOS在这方面的CSS怪癖。有关这方面的更多内容，请参阅关于类似问题的文章。我明白了。我会的。在这种情况下，您是否建议我只在台式机上使用mouseover和mouseout事件？我该怎么做呢？
$(".myMenu ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});

$(document).ready(function() {
    $('a,input').bind('touchend', function() {});
});