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

Question

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

问题在于，似乎下拉的<ul> 没有完全聚焦或其他什么，因为我必须在我的 iPhone 4 上单击两次链接才能使它们工作。

这是我正在使用的代码：

$(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 设置基本上是<ul>s 内的<ul>s，就像您期望从下拉菜单中看到的那样。如果您出于某种原因想要标记，请直接说出来，我会添加它。

编辑：这是我正在开发的网站的链接： http://bok-it.underbakke.net

编辑：我刚才注意到的一些您可能会觉得有用的附加信息。第一次单击链接时，当我第一次单击子链接时，该链接上的 CSS 就像悬停（如：悬停）主链接（我第一次单击以显示下拉菜单）失去状态的悬停。这就是为什么我认为这是一个焦点问题。

编辑：请求的 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（你也应该给 @jonsuh 一个赞成票以消除解决方案）：

$(".myMenu li ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});

Answer 1

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

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

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

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

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

$(".myMenu ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});

另一个是尝试保持与 CSS 相同的状态，它可能会阻止 Safari 检测到状态的变化。 （我删除了我的 CSS 答案，因为它不起作用）

Answer 2

阅读：http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

但是如果一个可点击的元素在鼠标悬停时也有动作，那么点击该元素将触发鼠标悬停事件而不是点击。再次点击同一个元素会产生一个点击事件。

如果您有鼠标悬停事件，iOS（可能是其他操作系统）将在初始点击时触发该事件，而不是实际的点击事件。我会向您的 JS 添加一些警报，以查看在初始点击时正在调用哪个事件。

Answer 3

不要让 Jquery 的点击事件尝试点击事件，例如

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

Documentation for Tap

Answer 4

我忘记了我在哪里找到了这个解决方案，但是使用 jQuery 我做了这样的事情，它似乎可以解决问题：

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

我曾经使用“touchstart”，但“touchend”似乎效果更好。