锚标签在 iPhone/iPod Touch/iPad 的 Safari (ios) 中不起作用

Posted 2023-03-12

【中文标题】锚标签在 iPhone/iPod Touch/iPad 的 Safari (ios) 中不起作用

【英文标题】：anchor tag not working in safari (ios) for iPhone/iPod Touch/iPad

【发布时间】：2013-11-25 21:59:57

【问题描述】：

这就是我的 html5 中的内容

<div class="google-play">
    <a href="http://example.com" role="button">
        <img src="img/google-play-btn.png"/>                                                                    
    </a>
</div>

在 chrome、FF、android 上运行良好，但在 iPad 上似乎无法运行。

【问题讨论】：

不工作是什么意思？

你点击什么也没发生

我刚刚在 Safari 中打开了您的 html 页面，单击并按预期处理了链接。与w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor 相同。您必须准确解释问题所在。

谢谢，有人解决了。他们给了我这个跨平台解决方案。

【参考方案1】：

通过 jQuery 在所有锚标签上使用 touchend 事件。例如：

$(function ()     
    $('a').on('click touchend', function()  
        var link = $(this).attr('href');   
        window.open(link,'_blank'); // opens in new window as requested 

        return false; // prevent anchor click    
    );    
);

如果您只想制作上述iPhone和iPad的特定功能，请检查“设备”是否为iPad，iPhone等。像这样：

$(function () 

    IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
    IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

    if (IS_IPAD || IS_IPHONE) 

        $('a').on('click touchend', function()  
            var link = $(this).attr('href');   
            window.open(link,'_blank'); // opens in new window as requested

            return false; // prevent anchor click    
        );     
    
);

【讨论】：

是的，女士！跨平台解决方案我的朋友。 :)

但是如何让它在新页面中打开呢？这将在同一页面上打开。如果我想在新页面中打开怎么办？

为什么不click tap？ Touchend 可能会冒着让某人从拖动中抬起手指并触发它的风险，对吧？

因为tap 需要jQuery Mobile，不是吗？