在不使用任意 setTimeout 的情况下检测触摸长按的可靠方法是什么？

如何解决在不使用任意 setTimeout 的情况下检测触摸长按的可靠方法是什么？

我正在尝试为网站上的长按操作添加事件处理程序，但我真的很惊讶它当前是 $currentYear 而我们仍然没有合适的长按事件处理程序.或者至少，据我所知，我们没有。我正在提出这个新问题，因为我觉得 StackOverflow 上目前存在的问题（是的，我知道 there are quite a lot）all 没有涵盖我的问题，因为我特别关注不寻找以下两个解决方案之一，所有这些问题似乎都满足：

Just use setTimeout（不喜欢它；那不是事件处理程序）
Just use a library：大量网站建议安装一些“longpress”、“taphold”或任何其他检测到这一点的库。

除此之外，还有大量其他文章提到了这两种方法之一。我的问题是它完全忽略了用户可以在手机设置中设置的长按持续时间，并将长按持续时间留给开发人员的偏好而不是用户自己的偏好。

所以，我制作了一小段控制台垃圾邮件，以确定长按时实际触发了哪些事件：

for (var ev in window)
    if (ev.substr(0,2) === 'on')
        window[ev] = e=>console.log(e);

由此，我推断出 Chrome 开发工具的移动查看器中会发生以下情况：

pointerover 指针事件 (*)
pointerdown 指针事件
touchstart TouchEvent (*)
长按延迟
selectstart 事件
停止触摸
gotpointercapture 指针事件 (*)
pointerup 指针事件 (*)
lostpointercapture 指针事件 (*)
pointerout 指针事件 (*)
touchend TouchEvent (*)
contextmenu 鼠标事件

然而，当在 Chrome 移动渲染器中长按链接或图像时，我注意到只有我用星号标记的事件发生了，以及其他一些不会在长按文本上发生的事件（即额外的似乎不相关的鼠标事件）。现在在我的实际手机上，我必须说我确实在长按链接或图像上获得了上下文菜单（无需先释放我的触摸）。所以这让我想到以下几点：

我制作了一个最小示例来演示一个解决方案，但我想知道这是否是实现此目标的好解决方案：

$(function() {
  window.touching = false;
  function longpressHandler(e) {
    if (!window.touching) return; // just a regular contextmenu/selectstart,e.g. from desktop
    console.log('Long press detected:',[e.type,e.target.tagName]);
    e.preventDefault(); // for demonstration: don't bother with selection/contextmenu
    window.touching = false; // prevent multiple long-presses being fired
  }
  $('body')
    .on('touchstart',e => window.touching = true)
    .on('touchend',e => window.touching = false)
    .on('selectstart',':not(a,img)',longpressHandler)
    .on('contextmenu','a,img',longpressHandler);
});

body {
  padding-bottom: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="http://lipsum.com" target="_blank">Lorem ipsum dolor sit amet</a>,consectetur adipiscing elit. Nullam id enim blandit,ultricies magna at,commodo erat. Praesent in orci orci. Sed eu feugiat sem,nec placerat ligula. Mauris molestie urna in ipsum suscipit scelerisque sit amet in elit. Vivamus eget enim orci. <a href="http://example.com" target="_blank">Proin elementum</a> lacus ut est consequat,blandit porttitor sapien dignissim. Integer porttitor,neque vel feugiat tristique,leo tortor egestas arcu,vel interdum ante turpis vitae urna. Pellentesque lacus quam,gravida eget elit quis,congue <a href="http://example.com" target="_blank">vehicula turpis</a>. In cursus enim ac pharetra bibendum. Vestibulum mattis fermentum convallis. Morbi nec facilisis ex. Etiam quis risus aliquet,sagittis sapien et,lobortis orci. In hac habitasse platea dictumst. Duis sit amet cursus felis.</p>

<img src="https://i.imgur.com/pNYvoEK.png"/>

是否有更好或更强大的解决方案来实际检测触摸设备上的长按？另外，我是否错过了一些设备工作方式不同的人（例如，假设这适用于我的 Android，但 iPhone 可能不使用 contextmenu，而只是使用某种不同的事件）？

在不使用任意 setTimeout 的情况下检测触摸长按的可靠方法是什么？

如何解决在不使用任意 setTimeout 的情况下检测触摸长按的可靠方法是什么？

相关推荐