Повторно наведите указатель мыши на()

Question

У меня есть контейнер, который будет отображаться/скрываться в зависимости от ссылки.

Поток:

кнопка меню

• Нажмите и это показывает контейнер на 2 секунды с таймером затем исчезает
• Нажмите на ссылку в контейнера и удерживает контейнер от снова выцветания
• кнопку меню Click и это позволяет контейнеру снова исчезнуть

Как ни странно, после последнего шага, если вы наведите курсор мыши, r он не исчезает. Я пробовал. У меня такое чувство, что я не звоню on() вправо.

Я пробовал использовать это в пределах $('.menu-control').on('click'), чтобы позволить мышино снова, но я предполагаю, что мне нужно определить его.

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

Я попробовал несколько других способов, включая обертывание весь парить внутри функции, называя его и назвав его, когда кнопка меню нажата. Нет успеха.

Это будет реализовано там, где, когда видео воспроизводится в качестве фона, «параметры» будут отображаться после нажатия кнопки меню и постепенного исчезновения. Ссылка в контейнере фактически остановит видео, увянет его и варианты с остатком на странице.

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(); 
});