锚标签不适用于iPhone/iPod Touch/iPad的safari(ios)

Question

这就是我的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上似乎不起作用。

Answer 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    
        });     
    }
});