ios 悬停_iOS Mobile Safari悬停菜单修复

ios 悬停

One component I'm quite proud of creating is the Mozilla Developer Network's dropdown menu component.  It's elegant, flexible, accessible via keyboard, and relatively compact (though it does require jQuery).  One problem I did notice, however, was that tapping once opened the menu (good) but you'd have to double tap (tap twice) on a submenu link to trigger a move to the link URL.  Not a catastrophic issue but certainly annoying. After a bit of tinkering I came up with a solution which satisfied the annoyance!

我为能够创建一个组件而感到自豪的是Mozilla开发人员网络的下拉菜单组件。 它优雅，灵活，可通过键盘访问并且相对紧凑(尽管它确实需要jQuery)。 但是，我确实注意到的一个问题是，点击一次即可打开菜单(好的)，但是您必须在子菜单链接上双击(点按两次)才能触发对链接URL的移动。 这不是灾难性的问题，但肯定令人讨厌。 经过一番修补后，我想出了一个解决方案，它满足了您的烦恼！

JavaScript (The JavaScript)

I found out the core issue:  the main menu item was coded to open the submenu upon mouseenter.  While I was grateful that iOS mobile Safari was using mouseenter as simply an open trigger, it was causing users the double tap pain to visit a link in the submenu.  So I took advantage of the touchstart event:

我发现了核心问题：主菜单项被编码为在mouseenter上打开子菜单。 虽然我很感激iOS移动Safari只是将mouseenter用作打开触发器，但它使用户双击痛苦访问了子菜单中的链接。 因此，我利用了touchstart事件：

$menuItem.on('touchstart mouseenter focus', function(e) {
    if(e.type == 'touchstart') {
        // Don't trigger mouseenter even if they hold
        e.stopImmediatePropagation();
        // If $item is a link (<a>), don't go to said link on mobile, show menu instead
        e.preventDefault();
    }

    // Show the submenu here
});

Why not touchend?  Unfortunately if the user held their finger down for more than a quick tap, the mouseenter event would trigger.  A bit odd but since I have touchstart as the first event in the listener, I can use stopImmediatePropagation to prevent the mouseenter from ever firing.  What's also nice is I don't have to do any device detection to juggle touchstart and mouseenter, so this is an awesome solution...

为什么不touchend ？ 不幸的是，如果用户按住手指不止一次快速点击，就会触发mouseenter事件。 有点奇怪，但因为我有touchstart作为听者的第一个事件，我可以用stopImmediatePropagation防止mouseenter根本不会触发。 什么也好看是我没有做任何设备的检测，忙里忙外touchstart和mouseenter ，所以这是一个真棒解决方案...

...but not a perfect solution.  If you tap and hold the main menu item link, the mobile browser context menu doesn't appear because we've used preventDefault.  I'm still exploring and experimenting so I'll continue to update this post as I search for the holy grail!

...但不是完美的解决方案。 如果您按住主菜单项链接，则不会出现移动浏览器上下文菜单，因为我们使用了preventDefault 。 我仍在探索和试验中，因此当我寻找圣杯时，我将继续更新此帖子！

翻译自: https://davidwalsh.name/ios-hover-menu-fix

ios 悬停