Question

我有一个容器，根据点击的链接显示/隐藏。

流程：

单击菜单按钮，它会显示容器2秒钟，然后显示计时器
点击容器中的链接，使容器不会褪色

再次单击菜单按钮，它允许容器再次淡出

奇怪的是，在最后一步之后，如果你悬停然后鼠标移动容器它不会褪色。我试过了。我有一种感觉，我没有正确地呼叫on()。

我已尝试在$('.menu-control').on('click')内使用此功能以允许再次使用鼠标，但我认为我需要对其进行定义。

$('#module-container').on('mouseleave');

我尝试过其他一些方法，包括将整个悬停包裹在一个函数中，命名并在单击菜单按钮时调用它。没有成功。

这将在视频播放时作为背景，＆＃34;选项＆＃34;将在单击菜单按钮后显示并淡出以避开。容器中的链接实际上会停止视频，淡化它以及保留在页面上的选项。

HERE'S MY VERSION ON JSFIDDLE

Answer 1

您无法重新启用此类事件处理程序。使用.off()时，它会从元素中删除指定的事件处理程序。因此，如果要重新注册处理程序，则需要再次将处理程序引用传递给.on()方法。

由于您需要多次使用处理程序引用，因此更喜欢将其作为独立函数编写，以便可以从多个位置引用它

你需要像

一样写

$('.menu-control').on('click', function() {
    $('#module-container').fadeIn(300);
    window.mtimer = setTimeout(function(){ $('#module-container').fadeOut(300); }, time);
    //The following commented line doesn't work. I want to reallow the mousleave function, defined below (marked as HERE)
    $('#module-container').on('mouseleave', mouseenter);
});

function mouseenter(){
    clearTimeout(window.mtimer); 
}
function mouseleave(){
    window.mtimer = setTimeout(function(){ $('#module-container').fadeOut(300); }, time);
}

var time = 2000;
$('#module-container').on({
    mouseenter: mouseenter,
    //HERE
    mouseleave: mouseleave
});

$('.stopme').on('click', function(e) {
    $('#module-container').show().off('mouseleave');
    e.preventDefault();
});

使用on（）启用悬停

1 个答案: