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

男娘i 2023-02-21 14:24 12阅读 0赞

ios 悬停

One component I'm quite proud of creating is the [Mozilla Developer Network's][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开发人员网络的][Mozilla Developer Network_s]下拉菜单组件。 它优雅，灵活，可通过键盘访问并且相对紧凑(尽管它确实需要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][https_davidwalsh.name_ios-hover-menu-fix]

ios 悬停

[Mozilla Developer Network_s]: http://developer.mozilla.org
[https_davidwalsh.name_ios-hover-menu-fix]: https://davidwalsh.name/ios-hover-menu-fix