禁用双击以点击触摸屏iOS设备

所以，最近我一直在一个让我改进和做出反应的网站上工作，而我所面对的问题之一是有很多可点击的元素，CSS和jQuery效果hover状态。

现在，首先我希望所有这些hover状态都是CSS，但是我遇到的主要问题是，在这些hover状态中，某些元素正在改变display和visibility CSS属性。 我做了一些阅读，显然如果是这种情况，在触摸屏iOS设备上，这会导致第一次“触摸”强制hover状态，然后再点击一下就可以实际点击元素。

我试图find一个解决scheme，不需要大量的标记和样式更改。 最好修复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/如果你点击其中一个块，你会看到它显示hover状态，然后你需要再次点击才能真正触发点击事件。

当隐藏一个元素似乎发生，然后hover状态显示该元素。

Answer 1

看起来像我find了一个解决scheme。

https://github.com/ftlabs/fastclick

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

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

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

只是简单地解释为什么会出现这个问题：

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

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

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

我明白为什么会这样，但是我想我宁愿iOS也不这样做，然后开发者只需要定制他们的网站就不会隐藏那些重要的内容。

Answer 2

我有一个非常类似的问题在IOS不得不双击标签button等我删除了所有的桌面样式，其中包括一些hover样式这没有任何区别。 我将hover样式放回到移动UI中未使用的位置。 最后问题是一个叫做css的类

。错误信息

更正事实certificate，这个CSS已经在我们的用户界面中使用，并链接到一个mouseover事件