如何检测水龙头？答案

【问题标题】：How to detect a tap?如何检测水龙头？
【发布时间】：2021-12-14 02:27:08
【问题描述】：

情况：

带有子菜单的菜单。主菜单引用不同的页面，子菜单引用页面上的部分。

所以菜单看起来像这样：

            .menu-link
                a(href="/") Homepage
                #homepage-submenu.submenu
                    .submenu-link 
                        a(href="/#section1") Section1
                    .submenu-link 
                        a(href="/#section2") Section2
            .menu-link
                a(href="/otherPage") Other Page
                #other-page-submenu.submenu
                    .submenu-link 
                        a(href="/#section1") Section1
                    .submenu-link 
                        a(href="/#section2") Section2

现在子菜单最初是折叠的。在“.menu-link”悬停时，子菜单被展开，它可以在任何有鼠标的机器上完美运行。

现在在带有触摸屏的中型屏幕设备中存在一个问题，因为我无法使用悬停事件来初始显示菜单。此外，屏幕的大小会促使其显示桌面版本。

所以第一次点击必须展开菜单并抑制点击事件，第二次点击必须激活页面链接。

我一般如何区分点击和点击？ 要么 我怎样才能检测到正在玩耍的鼠标？

最初我以为我可以收听“touchstart”事件。如果点击事件之前有任何“touchstart”，那么我会第一次抑制它。

但是，我的笔记本电脑和平板电脑上似乎都没有铬上的“touchstart”事件了？！ o.0！ elfelef!!11!11!!11!!!!

下一个想法是检查任何“mouseenter”或“mousemove”事件——然后我就会知道有一只鼠标在玩。^^

然而，那些模拟的点击事件似乎总是在触发之前产生这样的“mousemove”和“mouseenter”。

所以现在我完全不知道如何处理这种看似简单的情况。我会假设几乎每个人都会受到影响，因为我认为这些情况很常见，所以有人决定省略触摸事件而实际上整个铬项目都经历了它是很奇怪的。除了依赖“touchstart”的已弃用解决方案之外，我找不到任何解决方案，这在至少两个触摸设备（我用于测试的设备^^）上似乎不存在。

【问题讨论】：

一些相关的东西，但几年前被认为是一个错误：stackoverflow.com/questions/50792027/…

标签： html css menu touchscreen

【解决方案1】：

我很震惊 - 现在看来真的是long-time bug。

解决方法是在主体上为“touchstart”事件添加一个事件侦听器。

document.body.addEventListener("touchstart", () => return)

现在通过修复和“touchstart”事件触发，您可以通过“touchstart”事件的存在来区分点击和点击。

【讨论】：