Question

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

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

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

我尝试过以下方法：

visibility

但是，当用户将手指放在可点击元素上时，这会出现问题，并拖动页面进行滚动。拖动后松开手指时，$(document).ready(function() { $('a').on('click touchend', function(e) { var el = $(this); var link = el.attr('href'); window.location = link; }); });仍会更改。

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

提前致谢。

编辑：

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

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

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

Answer 2

我在IOS中有一个非常类似的问题，不得不双选项卡按钮等我删除了所有桌面样式，其中包括一些悬停样式，这没有任何区别。我将悬停样式放回到移动UI中未使用的状态。最后，问题是一个名为

的css类

.error消息

更正后发现这个css已在我们的用户界面中使用，并且已链接到鼠标悬停事件

Answer 3

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

就我而言，我只是在touch标签中添加了<html>类，以便检测设备是否可以触摸并且应始终显示通常仅在悬停时显示的某些元素。我的解决方法有两方面：

移动到大于300毫秒的延迟（即，移动浏览器通常在确定这是单击还是双击之前要等待的时间）。就我而言，我只是在500毫秒内安定下来（有关原因，请参见下面的＃2）。
然后我使用cookie临时保留此设置，以便这些元素将立即可见，并且在后续页面加载时不需要触摸事件侦听器（因此，第一次出现500ms的延迟不应该破坏交易）。

示例代码：

在这种情况下，使用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);
    }
}

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

3 个答案: