【问题标题】：data-hover menu doesn't open for some Chrome users某些 Chrome 用户无法打开数据悬停菜单
【发布时间】：2017-01-23 21:19:04
【问题描述】：

我有带有data-hover="dropdown" 的下拉菜单。我收到了一些用户的报告，称他们没有显示下拉菜单。最合作的用户说它发生在 Chrome 55.0.2883.87m（在 Windows 10 14393.576 上），并且不会发生在其他浏览器上。我有完全相同的 Chrome 和 Windows，而且菜单看起来很好。

我的网站：tipulnagish.co.il - 从主菜单打开下拉菜单。

本站使用Bootstrap v3.2.0，菜单基本是：

<ul id="menu-main" class="nav navbar-nav">
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown">
    <a href="#" class="dropdown-toggle" data-hover="dropdown" data-delay="500" data-close-others="false"><span>חיפוש מטפל/ת לפי מקצוע</span></a>
    <ul class="dropdown-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="/listing-category/פסיכולוגי"><span>טיפול פסיכולוגי / פסיכותרפיה</span></a></li>
(etc.)

可能是什么原因？
我也许可以让 TeamViewer 访问用户的机器。我应该检查什么？

更新：

我的笔记本电脑上也有这种情况，它有一个触摸屏，看起来是相关的。
This demo 有同样的问题。 Chromium issue 409383 的分辨率表明这是因为该站点基于 navigator.maxTouchPoints 进行了特殊处理 - 但我在整个站点中都没有找到任何此类引用。

【问题讨论】：

根据我之前工作的个人经验，最常见的情况是缓存卡在浏览器上，应用程序或扩展程序会干扰浏览器。尝试清除/禁用这些，然后尝试它是否在 Chrome Canary 中工作，然后才开始查看代码，因为该问题只能在 Chrome 55、Windows 10 上重现。编辑：顺便说一句，与您的客户相同的配置，一切正常我。
另外，他们使用的是什么设备，是触摸设备/笔记本电脑吗？也许这可以给你一些想法。
我的是台式机，不知道他的。我已经将扩展列表与我的进行了比较——没有什么特别的。我不知道这是否仅在 Chrome55 上进行 - 这只是我的报告。我会请求尝试清除缓存。
按照@yavor 的想法，我发现我的笔记本电脑上有repro，既是Touch 又是hi-DPI。我会测试它并报告！

标签： twitter-bootstrap google-chrome drop-down-menu

【解决方案1】：

原来data-hover="dropdown" 触发了插件bootstrap-hover-dropdown，其中包含禁用在触控设备上悬停的代码：

$.fn.dropdownHover = function (options) {
    // don't do anything if touch is supported
    // (plugin causes some issues on mobile)
    if ('ontouchstart' in document) return this; // don't want to affect chaining

The plugin's issue #68 详细讨论了这个问题，但没有任何好的解决方案。作为我的解决方法，我将data-toggle="dropdown" 添加到我的标记中，因此触摸用户可以通过单击/触摸打开菜单。这有一些怪癖，但与非触摸用户看到的悬停行为相当有效。

我是如何发现的

使用Visual Event Chrome extension，我看到菜单栏有绑定事件mouseover/mouseout，而受影响的（触摸）机器没有。这些事件注册为bootstrap-hover-dropdown.js，在此之前，上面的代码禁用了触摸设备上的悬停。

【讨论】：