解决了 iPad/iPhone 悬停导致用户双击链接的问题。但是如何处理花式框链接答案

【问题标题】：iPad/iPhone hover causes the user to double click a link is solved. But what to do with fancybox links解决了 iPad/iPhone 悬停导致用户双击链接的问题。但是如何处理花式框链接
【发布时间】：2013-09-12 19:42:47
【问题描述】：

This answer 是围绕我的网站导航的 :hover 的完美解决方案，因此 iPad 用户不必双击链接。

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

现在我该如何处理 FancyBox 链接？我可以通过他们另一堂课或任何需要的东西来获得正确的结果。 Window.location 没有解决方案（有带有 iframe 的 fancyBoxes）。

我创建了两个小提琴来证明问题也出现在没有 iframe 的情况下。

first one 会打开fancybox，但the second one 只能在我的台式电脑上运行，而不能在 iPad 上运行。

另外，一些fancybox 链接直接在页面的导航中，带有:hover 效果。在这里，用户不必单击两次，Fancy-Iframe 就会打开。

谁能告诉我如何解决这个问题。非常感谢大家的帮助。

【问题讨论】：

标签： jquery ipad iframe fancybox fancybox-2

【解决方案1】：

您可以在 fancybox 选择器上触发 click 事件，而不是 window.location。

因此，您可以在第二个 jsfiddle 中调整代码：

$(document).ready(function () {

    $('.fancybox').fancybox();

    $('a').on('click touchend', function (e) {
        var fancy = this.className.indexOf('fancybox') != -1;
        if (fancy) {
            $(this.className).trigger("click")
        } else {
            // var el = $(this); 
            // var link = el.attr('href'); // simply use this.href
            window.location = this.href;
            return false;
        }
    });
});

查看您更新的JSFIDDLE

注意：如果您有画廊，您可能会遇到同样的问题，悬停在花式导航箭头上，在这种情况下，您可能需要触发 iPad 的 $.fancybox.next() 和 $.fancybox.prev() 方法或使用而是使用助手按钮。

【讨论】：