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

Posted 2023-05-08

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

【英文标题】：iPad/iPhone hover causes the user to double click a link is solved. But what to do with fancybox links

【发布时间】：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 就会打开。

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

【参考方案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() 方法或使用而是使用助手按钮。