禁用双击以在触摸屏iOS设备上单击 [英] Disable Double Tap To Click On Touchscreen iOS Devices

问题描述

所以，最近我一直致力于一个让我改进并做出回应的网站，我遇到过的一个问题是有很多可点击的元素，混合了用于悬停状态的CSS和jQuery效果。

So, quite recently I've been working on a website that was given me to improve and make responsive, and one of the issues that I've been faced with is that there are many elements that are clickable, with a mixture of CSS and jQuery effects for hover states.

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

Now, firstly I'd prefer all of these hover states to be CSS, but the main issue I'm having is that on these hover states, certain elements are changing display and visibility css properties. I did some reading, and apparently if this is the case, on touchscreen iOS devices, this causes the first 'touch' to force the hover state, and then a second click is needed to actually click the element.

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

I'm trying to find a solution that doesn't require lots of markup and styling changes. Preferably a fix harnessing jQuery/JavaScript would be good.

我尝试了以下内容：

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

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

However, this has issues when the user holds their finger down on a clickable element, and drags the page to scroll. When they release their finger after dragging, the window.location is still changed.

我将添加一个jsFiddle稍后如有必要。

I'll add a jsFiddle later if necessary.

提前致谢。

编辑：

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

Here's a jsFiddle that shows the issue. http://jsfiddle.net/0bj3uxap/4/ If you tap one of the blocks, you'll see it shows the hover state, you then need to tap again to actually fire the click event.

这似乎发生在隐藏元素时，然后悬停状态显示元素。

It seems to happen when an element is hidden, and then the hover state shows the element.

推荐答案

看起来我找到了解决方案。

Looks like I found a solution.

https://github.com/ftlabs/fastclick

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

FastClick fixes this issue, and removes the 300ms delay issue with some mobile browsers.

只需在< script> 标签，然后使用jQuery或您喜欢的任何内容启动它：

Just include the library in <script> tags, and then initiate it using jQuery, or whatever you prefer:

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

只是简单解释一下问题的原因：

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

When an element is hidden, for example when it has a CSS property of any of the following:

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

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

And the hover state of the hidden element then shows the element, iOS doesn't fire a click event on the first touch, it forces the hover state (to show the element). The user then needs to touch the element again for a click event to fire.

我知道为什么会添加这个，但我想我宁愿iOS没有这样做，然后开发人员只需要定制他们的网站，不要隐藏那些至关重要的内容。

I see why this has been added, but I think I'd rather iOS didn't do this, and then developers would just need to tailor their websites to not hide content that coud be vital.

这篇关于禁用双击以在触摸屏iOS设备上单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！