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

Posted 2023-03-06

【中文标题】触摸屏用户必须点击链接两次才能工作

【英文标题】：Touch-screen users have to click link twice for it to work

【发布时间】：2014-08-31 00:33:03

【问题描述】：

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

问题在于，似乎下拉的<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");
);

【问题讨论】：

你能把html标记也放上去吗

@V31 好的，我现在已经添加了 :)

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

好吧，我认为我明白了。如果您有任何快速建议，我将如何解决此问题？

我喜欢你的回答。非常具有描述性，我学到了很多东西，这让我感觉不那么愚蠢。老实说，如果我能给你 10 票，我会的。我只想提醒任何可能遇到此问题的人，CSS 出于某种原因无法正常工作，但是当我将选择器更改为“.myMenu li ul li a”时 jQuery 会起作用

为什么他们会实施这个世界上的所有美好事物？如果他们要为我们做这样的任意决策，Jeeze 让我们回到使用闪存。它完全打破了许多标准的行业实践模型，显然，您必须使用 javascript 来“修复”这些模型。什么鬼？？

我不建议用这样的 JS 解决这些问题。解决这些问题的根本在于了解 iOS 在这方面的 CSS 怪癖。有关这方面的更多信息，请参阅this answer 的类似问题。

【参考方案2】：

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

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

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

【讨论】：

我明白了。我会去做。以防万一，您是否建议我只在桌面上设置 mouseover 和 mouseout 事件？我该怎么做呢？

【参考方案3】：

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

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

Documentation for Tap

【讨论】：

由于某种原因，我仍然需要点击两次才能转到链接。我也会将问题的链接添加到我正在处理的页面。

我相信还有一个 'touch' 或 'touchstart' 以及水龙头，也许其中一个会起作用。

不是jquery mobile的点击事件吗？

您也可以尝试绑定到 'vclick' 事件，该事件应该在任何客户端中“做正确的事”。

【参考方案4】：

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

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

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