在触摸屏 iOS 设备上禁用双击以单击

因此，最近我一直在开发一个网站，该网站让我改进并使其具有响应能力，而我面临的问题之一是有许多可点击的元素，其中混合了 CSS 和悬停状态的 jQuery 效果。

现在，首先我希望所有这些悬停状态都是 CSS，但我遇到的主要问题是在这些悬停状态上，某些元素正在发生变化display and visibilityCSS 属性。我做了一些阅读，显然如果是这种情况，在触摸屏 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 。

提前致谢。

EDIT:

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

当一个元素被隐藏，然后悬停状态显示该元素时，似乎会发生这种情况。

看来我找到了解决方案。

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 不这样做，然后开发人员只需要定制他们的网站，不要隐藏可能至关重要的内容。