iPad/iPhone悬停问题导致用户需要双击链接。

我认为你的链接没有onmouseover事件，其中一个轻触会激活onmouseover，而双击则会激活链接。但我不确定。我没有iPad。

我认为你需要使用手势/触摸事件。

https://developer.apple.com/documentation/webkitjs

我知道我来晚了，但这是我发现的最简单的解决方法之一：

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

这不仅适用于链接（锚标签），而且还适用于其他元素。希望这有所帮助。

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

其他答案对我都不起作用。我的应用程序有很多事件监听器，自己的复选框和带有监听器和没有监听器的链接。

我使用这个：

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: https://dev59.com/Z3I-5IYBdhLWcg3wwLS3#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

这个简短的代码片段似乎是可以工作的。 当链接被轻击时触发点击事件：

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

如果您使用Modernizr，像之前提到的那样使用Modernizr.touch非常容易。

然而，出于安全考虑，我更倾向于同时使用Modernizr.touch和用户代理测试的组合。

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

如果您不使用Modernizr，您可以将上面的Modernizr.touch函数替换为('ontouchstart' in document.documentElement)

另外请注意，测试用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备范围。

只是一个改进，以避免当您错误地在链接上滑动手指时发生重定向。

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

我遇到了一个类似的情况，我将事件绑定到元素的mouseenter/mouseleave/click状态上，但在iPhone上，用户必须双击该元素才能首先触发mouseenter事件，然后再次触发click事件。

我解决了这个问题，使用了与上面类似的方法，但我利用了jQuery $.browser插件（适用于jQuery 1.9及以上版本），并在mouseenter绑定事件中添加了一个.trigger事件，如下所示：

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

.trigger可以避免在iPhone或iPad上查看元素时需要双击元素，通过在mouseenter（或初始单击）元素时触发.click事件处理程序。这可能不是最优雅的解决方案，但在我的情况下非常有效，并利用了我已经安装的插件，并且只需要添加一行代码即可使现有事件在这些设备下正常工作。

您可以在此处获取jQuery $.browser插件：https://github.com/gabceb/jquery-browser-plugin

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

上述示例将影响触摸设备上的所有链接。

如果您只想针对特定链接进行操作，您可以在其上设置一个类，例如：

HTML:

<a href="example.html" class="prevent-extra-click">防止在触摸设备上额外点击</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

祝愉快！

Jeroen

我遇到了同样的问题，但不是在触摸设备上。每次点击时都会触发事件。这可能与事件排队有关。

然而，我的解决方案是这样的：在点击事件（或触摸？）中设置一个定时器。如果链接在 X 毫秒内再次被点击，就返回 false。

要为每个元素设置定时器，您可以使用 $.data()。

这也可能解决上面描述的 @Ferdy 问题。