jQuery 重定向到 MouseOver 循环页面

Question

我正在尝试在移动或悬停时重定向或加载页面，下面的代码对于我想要做的事情来说效果很好，但是如果您将移动保持在链接上，它会循环并不断重新加载页面，当鼠标悬停在链接上时如何阻止它不断循环？

$(document).ready(function() {
    $(".container").css("background", "");
    $(".container").fadeIn(500);
    $("#side-menu ul li a").hover(function(event){
      event.preventDefault();
      linkLocation = this.href;

      $(".container").fadeOut(1000, redirectPage);
    });


    function redirectPage() {
      window.location = linkLocation;
    }
});

Answer 1

您有两个代码问题和一个策略问题:

问题 1 正如 @FloydThreepwood 指出的，您应该使用 mouseenter。当鼠标进入和离开该区域时，hover 将触发。 mouseenter 仅在您输入时触发。

问题 2 在 jQuery 有机会处理现有鼠标事件之前，您就绑定(bind)了 mouseenter。在ready调用之后，它将看到鼠标位于一个对象上，并在该对象上调用mouseenter。您可以通过将代码封装在 $('body').one('mouseover', function() {...}); 中来取消第一个事件。在此设置中，初始 mouseenter 事件将触发并向下传播到正文。然后，body 事件将能够创建鼠标事件，而不必担心初始触发:

$(document).ready(function() {
    $('body').one('mouseenter', function() {
        $(".container").css("background", "");
        $(".container").fadeIn(500);
        $("#side-menu ul li a").mouseenter(function(event) {
            event.preventDefault();
            linkLocation = this.href;

            $(".container").fadeOut(1000, redirectPage);
        });
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

问题 3 你永远不应该做这样的事情。在此设计中，用户可能会意外地将鼠标移过页面并开始加载新页面。它还严重降低了可能使用屏幕阅读器或其他设备的用户的可访问性。您可以有仅影响页面的部分的可取消操作，例如悬停预览，但您永远不应该有仅基于用户移动鼠标的导航操作。