禁用双击以单击触摸屏 iOS 设备答案

【问题标题】：Disable Double Tap To Click On Touchscreen iOS Devices禁用双击以单击触摸屏 iOS 设备
【发布时间】：2016-02-28 14:58:09
【问题描述】：

所以，最近我一直在开发一个网站，该网站让我改进并做出响应，我遇到的一个问题是有许多可点击的元素，混合悬停状态的 CSS 和 jQuery 效果。

现在，首先我希望所有这些悬停状态都是 CSS，但我遇到的主要问题是，在这些悬停状态上，某些元素正在更改 display 和 visibility css 属性。我做了一些阅读，显然如果是这种情况，在触摸屏 iOS 设备上，这会导致第一次“触摸”强制悬停状态，然后需要第二次单击才能实际单击元素。

我正在尝试找到一种不需要大量标记和样式更改的解决方案。最好利用 jQuery/JavaScript 进行修复。

我尝试了以下方法：

$(document).ready(function() {
   $('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });
});

但是，当用户将手指放在可点击元素上并拖动页面进行滚动时，就会出现问题。当他们在拖动后松开手指时，window.location 仍然改变。

如果有需要，我稍后会添加一个 jsFiddle。

提前致谢。

编辑：

这是一个显示问题的 jsFiddle。 http://jsfiddle.net/0bj3uxap/4/ 如果您点击其中一个块，您会看到它显示悬停状态，然后您需要再次点击才能真正触发点击事件。

似乎发生在一个元素被隐藏，然后悬停状态显示该元素的时候。

【问题讨论】：

标签： javascript jquery ios touchscreen

【解决方案1】：

看来我找到了解决办法。

https://github.com/ftlabs/fastclick

FastClick 修复了此问题，并消除了某些移动浏览器的 300 毫秒延迟问题。

只需将库包含在<script> 标签中，然后使用 jQuery 或任何您喜欢的方式启动它：

$(document).ready(function() {
    FastClick.attach(document.body);
});

只是简单解释一下为什么会出现问题：

当一个元素被隐藏时，例如当它具有以下任何一个 CSS 属性时：

display: none;
opacity: 0;
visibility: hidden;

然后隐藏元素的悬停状态显示元素，iOS 不会在第一次触摸时触发点击事件，它会强制悬停状态（显示元素）。然后用户需要再次触摸该元素才能触发点击事件。

我明白为什么要添加这个，但我想我宁愿 iOS 不这样做，然后开发人员只需要调整他们的网站，不隐藏可能很重要的内容。

【讨论】：

非常感谢。这对我来说很有用。我的问题是：我必须在标签上单击 2 次才能在 iPad 上激活其链接。
另外值得注意的是，iOS 不会触发点击事件如果这些属性在初始 touchstart/move/mousedown 的 ~300ms 内被修改。因此，您仍然可以应用这些更改，但至少在初始加载时您应该再等一会儿。我在下面有一个解决方案，它使用 cookie 暂时保留它，以防止后续页面加载需要延迟。

【解决方案2】：

如果它对其他人有帮助：就我而言，我遇到了一个非常相似的问题，但这不仅仅是因为 :hover 本身的风格。相反，这是因为我使用 JavaScript 事件侦听器（touchstart、touchmove 和 touchend）来更改页面上元素的可见性（无论在哪里）。

在我的例子中，我只是在<html> 标签中添加了一个touch 类，以检测设备是否能够触摸并且应该始终显示某些通常只在悬停时显示的元素。我的解决方法有两个：

延迟 >300 毫秒（即移动浏览器在确定这是单击还是双击之前通常可能等待的时间量）。就我而言，我只是选择了 500 毫秒（请参阅下面的 #2 了解原因）。
然后我使用 cookie 临时保留此设置，以便这些元素立即可见，并且在后续页面加载时不需要触摸事件侦听器（因此第一次延迟 500 毫秒不应该是破坏交易)。

示例代码：

在这种情况下，使用 jQuery + https://github.com/carhartl/jquery-cookie（修改为支持maxAge）。

function initTouchSupport() {
    // See if touch was already detected and, if so, immediately toggle the touch classes.
    if ($.cookie('touch-device')) {
        toggleTouch();
        return;
    }

    // Be efficient and listen once and, if ever detected, flag capability and stop listening (for efficiency).
    var events = 'touchstart touchmove touchend';
    $body.on(events, detectTouch);
    function detectTouch() {
        // Detected; retain for a short while (e.g. in case this is a laptop with touch capability and they switch
        // to mouse control). That way there's no delay on the next several page loads and no chance of a double-touch bug.
        $body.off(events, detectTouch);
        $.cookie('touch-device', true, {
            path: '/',
            domain: getDomain(),
            maxAge: 86400 // 86400 seconds = 1 day
        });

        setTimeout(toggleTouch, 500);
    }

    function toggleTouch() {
        // Swap out classes now
        $html.toggleClass('no-touch', false);
        $html.toggleClass('touch', true);
    }
}

【讨论】：

【解决方案3】：

我在 IOS 中遇到了一个非常相似的问题，不得不双标签按钮等我删除了所有桌面样式，其中包括一些悬停样式，这没有什么区别。我将悬停样式放回了移动 UI 中未使用的样式。最后，问题是一个名为

的 CSS 类

.错误消息

更正事实证明这个 css 已在我们的 UI 中使用，并且与鼠标悬停事件相关联

【讨论】：