锚标签在Safari（iOS）的iPhone / iPod Touch / iPad上无法正常工作

Question

这是我在我的HTML5上拥有的内容

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

这段代码在Chrome、Firefox和Android上能够正常工作，但在iPad上似乎无法工作。

- Monica

---

不工作是指具体指什么？ - A-Live

您点击了但没有任何反应。 - Monica

我刚刚在Safari中打开了你的HTML页面，点击链接后，它按预期进行了处理。同样的情况也出现在http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor上。你需要解释一下问题具体是什么。 - A-Live

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

Answer 1

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

$('a').on('touchend', function(event) {

$(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特定功能仅限于这些设备，请检查“device”是否为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    
        });     
    }
});

- Mike Barwick

---

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

但是我该如何让它在新页面中打开？它会在同一页上打开。如果我想要在新页面中打开怎么办？ - Monica

为什么不使用click tap呢？使用touchend可能会有人在拖动时意外松开手指触发它，对吗？ - Ben Saufley

因为tap需要jQuery Mobile，是吧？ - Mike Barwick