触屏用户需要点击两次链接才能生效。

Question

我有一个下拉菜单，通常在鼠标悬停时会弹出，但在触摸设备上，我只需使其能够通过单击打开即可。

问题是，在我的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>内嵌<ul>。如果您出于某种原因需要标记，请告诉我，我会添加它。

编辑：这是我正在工作的网站的链接：http://bok-it.underbakke.net 编辑：我刚刚注意到一些您可能会发现有用的额外信息。第一次单击链接时，该链接上的CSS会像悬停（如：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代码（你还应该给@jonsuh点个赞，因为他提供了解决方案）:

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

- imp

---

请问您能否同时放置HTML标记？ - V31

@V31 当然，我现在已经添加了它 :) - imp

Answer 1

当您在子菜单中鼠标悬停在链接上时，父列表项的状态会更改。

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

简而言之，请确保父列表项没有状态更改。与悬停在子菜单链接上时相同。

我还没有测试过这些解决方案，而且在没有实时代码的情况下很难，但可能的解决方案如下：

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

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

另一种方法是尝试使用CSS保持状态不变，这可能会让Safari无法检测到状态的变化。（我删除了我的CSS答案，因为它没有起作用）

- jonsuh

---

好的，我想明白了。如果您有任何快速建议，我该如何解决这个问题？ - imp

我喜欢你的回答。非常详细，我学到了很多，它帮助我感觉不那么愚蠢了。说实话，如果我能给你10个赞，我会的。我只想提醒可能遇到这个问题的任何人，CSS由于某种原因没有起作用，但当我将选择器更改为“.myMenu li ul li a”时，jQuery可以正常工作。 - imp

为什么世界上所有的好东西都要他们来实现呢？天啊，如果他们要像这样为我们做任意决策，那就让我们回到使用Flash吧。这完全破坏了很多标准行业实践模型，显然，你必须用JavaScript来“修复”。这是怎么回事？ - dudewad

我不建议用JS这样解决这些问题。解决这些问题的根本方法是了解iOS在这方面的CSS怪癖。有关更多上下文，请参阅类似问题的此答案。 - hexalys

Answer 2

阅读此文：http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html 但是，如果可点击元素在鼠标悬停时还会执行某些操作，则点击该元素将触发鼠标悬停事件而不是单击事件。再次点击相同的元素将产生单击事件。

如果您有鼠标悬停事件，则iOS（可能还包括其他操作系统）将在初始单击时触发该事件，而不是实际的单击事件。我建议在您的JS中添加一些警告，以确定哪个事件被调用了。

- DA.

---

我明白了。我会这么做的。如果需要，在桌面设备上，您建议我只使用mouseover和mouseout事件吗？我该如何实现这个？ - imp

Answer 3

我忘记在哪里找到这个解决方法，但是使用jQuery，我会像这样操作，看起来似乎可以解决问题：

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

我过去使用的是“touchstart”，但是“touchend”似乎效果更好。

- Matt Rossetta

Answer 4

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

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

Tap 文档

(此链接为原文链接，仅供参考)

- V31

---

出于某种原因，我仍然需要点击两次才能进入链接。我也会在我正在工作的页面上添加一个到问题的链接。 - imp

我相信还有一个“touch”或“touchstart”，除了tap之外，也许其中一个会起作用。 - DasBeasto

触摸事件不仅适用于jQuery移动版吗？ - Huangism

你也可以尝试绑定到“vclick”事件，这个事件应该在任何客户端中都能够“做正确的事情”。 - bundacia