鼠标输入鼠标离开没有按照我认为应该的方式工作

mouseenter mouseleave not working the way I think it should

本文关键字：鼠标 工作 方式 离开 输入      更新时间：2023-09-26

我对jQuery相对较新，我似乎遇到了这个mouseenter/mouseleave问题。我想设置一个菜单，当页面不在顶部时"隐藏"，这似乎工作正常，当它被隐藏时，我想让它成为当用户将鼠标悬停在它上面时，类切换并且菜单回来。但是，当它滚动回顶部时，我不希望这样。当页面首次加载（在 Firefox 和 chrome 中）并且我还没有滚动时，它工作正常，但是向下滚动并返回顶部后，菜单将在鼠标离开时隐藏。

这是我当前代码设置的jsFiddle。

我已经尝试解决这个问题一段时间了，并尝试了其他一些方法。

我试过像这样使用悬停

$("#access").hover(function() {
            $(this).removeClass("scroll").addClass("normal");
        }, function() {
            $(this).removeClass("normal").addClass("scroll");
        });

但这与我现在拥有的代码相同。

我尝试的其他一些方法是将 b 变量传递给另一个函数，创建一个单独的div 并跟踪它的位置以确定是否使用 mouseenter/mouseleave，最后绑定它们，但这些似乎都没有像我认为的那样工作。

我想不出还有什么可以尝试的，所以我不确定这是否是我做错了什么，或者这甚至不可能像这样完成。

这是我的第一个问题，我试图包含尽可能多的信息，希望这是足够的信息。

试试这个

$(document).ready(function() {
    $(window).scroll(function() {
        var b = $(window).scrollTop();
        $("#access").toggleClass("normal", b == 0)
        $("#access").toggleClass("scroll", b > 0)
    });
    $("#access").hover(function() {           
        if($(window).scrollTop() > 0){
            $("#access").toggleClass("normal scroll");
        }
    });
});​

http://jsfiddle.net/bJquD/6/

您没有考虑页面的滚动状态，因此无论页面是否滚动，mouseenter/mouseleave 事件都会重置类名而不考虑。可以预见的是，这与你想要的并不相符。

对此的明显解决方案是使用全局变量（尽管在 jQuery 文档就绪的范围内）来跟踪这一点，然后在 hover() 函数中检查它，导致以下内容：

var scrolled = false;
$(window).scroll(
    function(){
        var b = $(window).scrollTop();
        if (b == 0) {
            $('#access').removeClass('scroll').addClass('normal');
            scrolled = false;
        }
        else if (b > 0) {
            $('#access').removeClass('normal').addClass('scroll');
            scrolled = true;
        }
    });
$('#access').hover(
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'scroll'
            $('#access').removeClass('scroll').addClass('normal');
        }
    },
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'normal' (from mouseenter)
            $('#access').removeClass('normal').addClass('scroll');
        }
    });​

JS小提琴演示。

这样做的结果是，如果页面未滚动，则mouseenter/mouseleave事件不执行任何操作（因为它们不应该，在这种情况下，normal类名是正确的），而如果页面滚动，它们会在mouseenter上删除滚动类名并在mouseleave上恢复它。

是的，您正在向该元素添加一堆事件处理程序，这最终会令人难以置信地减慢页面速度。你想避免这样做。或者，您可以绑定事件，然后在滚动到页面顶部时将其删除。最好的方法是使用下面的代码。

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
            $("#access").removeClass("normal").addClass("scroll").on('mouseenter', function() {
                $(this).removeClass("scroll").addClass("normal");
            }).on('mouseleave', function() {
                $(this).removeClass("normal").addClass("scroll");
            });
        } else {
            $("#access").removeClass("scroll").addClass("normal").off('mouseenter mouseleave');
        }
    });
});​

您也可以在这里尝试一下。

希望这对您有所帮助:)

在这里，您只需添加变量isOnTop，mouseenter和mouseleave处理程序在执行任何操作之前都会对其进行检查。

$(document).ready(function() {
var isOnTop=1;
    $(window).scroll(function() {
        var b = $(window).scrollTop();
        if (b > 0) {
            isOnTop=0;            
            $("#access").removeClass("normal").addClass("scroll");
        }
        else if (b == 0) {
            isOnTop=1;
            $("#access").removeClass("scroll").addClass("normal");
        }
    });
    $("#access").mouseenter(function() {
        if(isOnTop){return;}
        $(this).removeClass("scroll").addClass("normal");
    });
    $("#access").mouseleave(function() {
        if(isOnTop){return;}
        $(this).removeClass("normal").addClass("scroll");
    });
});​
相关文章：