使用Javascript/jQuery对触摸屏悬停效果的不同处理进行说明

在桌面上使用鼠标时，您知道将光标移到上方将悬停，单击将单击。在手机上，情况并非如此。悬停由不同的设备处理。例如，给定以下基本HTML

<div id="block">
    <div class="default">Block</div>
    <div class="overlay">Overlay'd!</div>
    <div class="click">Click'd!</div>
</div>

有关工作示例，请参见

当我在Nexus7上触碰它时，它会同时触发hover和touch。当我在iPad上触摸它时，它会在第一次触摸时触发鼠标悬停，然后点击第二次

我希望覆盖显示在手机上，所以我不想只是禁用它们。我的解决方案是设置一个暂停时间，让悬停在两秒钟后消失，这在Nexus上很有效，但在iPad上却不行。于是我嗅出了iOS来禁用悬停，并在点击时产生定时效果

但我知道设备嗅探并不是一个好的解决方案。另外，我也了解到了这一点，用jQuery区分触摸和点击可能是不可能的

因此，问题是：如何使用JavaScript/jQuery检测悬停和单击事件是否同时触发？我想在鼠标悬停和点击之间设置一个计时器，但是你必须鼠标悬停并点击一次才能工作

---

在一个完美的世界中，我可以1）检测何时由触摸事件而不是鼠标悬停触发悬停，或者2）标准化触摸时悬停的工作方式（如果普遍实现，则类似于

aria haspoop

）。有类似的情况吗？

您应该为移动设备/平板电脑使用

touchstart

和

touchend

事件，然后检测触摸是否过长（超过2秒）

变量超时， 长触

$("#block").bind('touchstart', function () {
    $(".overlay").show();
    timeout = setTimeout(function () {
        longtouch = true;
    }, 2000);
}).bind('touchend', function () {
    $(".overlay").hide();
    if (longtouch) {
        // It was a long touch.
        if (!$('.click').is(':visible')) {
            $('.click').show();
        } else {
            $('.click').hide();
        }
    }
    longtouch = false;
    clearTimeout(timeout);
});

根据评论更新 要检测触摸设备，请使用此功能，并根据情况包括适当的功能：

function isTouchDevice() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
};

---

使用

$（'#block'）。单击（函数（）{$（'.click'）。切换（）；}）。它既可以显示也可以隐藏。这并不能回答我的问题…是的，我知道这只是给你的一个提示。谢谢！我会记住的。这是一把有趣的小提琴，但是如果你为光标添加了一个悬停效果，那么悬停事件在手机上不会仍然触发吗？此外，这个想法是让覆盖层在触摸/点击时出现并消失，而不是在长时间触摸时激活点击。如果我不清楚，很抱歉。是的，它会的，如果你想要它同时用于触摸和悬停，那么添加一个检测功能来检测触摸屏设备。我给你加了一个。至于点击触发器，你可以很容易地改变，我只是举了一个有趣的例子。。。我想我还得再做些实验。我的印象是，使用JavaScript无法可靠地检测触摸屏设备，因为一些触摸设备也有鼠标。
function isTouchDevice() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
};