0

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

流量：

  • 单击菜单按钮，它会显示容器 2 秒，计时器然后淡出
  • 单击容器内的链接并防止容器褪色
  • 再次单击菜单按钮，它允许容器再次淡出

奇怪的是，在最后一步之后，如果您将鼠标悬停，则鼠标离开容器，它不会褪色。我试过了。我有一种感觉，我打电话on()不对。

我已经尝试在 中使用它$('.menu-control').on('click')来再次允许鼠标离开，但我认为我需要定义它。

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

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

这将在视频作为背景播放时实现，“选项”将在单击菜单按钮后显示并淡出以不碍事。容器内的链接实际上会停止视频、淡化它以及保留在页面上的选项。

这是我在 JSFIDDLE 上的版本

4

1 回答 1

0

您不能像这样重新启用事件处理程序。当您使用.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();
});
于 2013-08-01T02:42:20.330 回答