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有机会处理现有鼠标事件之前，您正在绑定mouseenter。准备好调用后，它会看到鼠标在一个对象上，并在该对象上调用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 你永远不应该做这样的事情。在此设计中，用户可能会意外地在页面上移动鼠标并开始新的页面加载。它还严重降低了可能正在使用屏幕阅读器或其他设备的用户的可访问性。您可以执行仅影响页面的部分的可取消操作，例如悬停预览，但您不应仅仅根据用户移动鼠标进行导航操作。

Answer 2

改为使用mouseenter。

jQuery重定向到MouseOver循环上的页面

2 个答案: