如何防止div在隱藏時觸發父級的mousemove

我有一些媒體。在這之上，我有一組控件，當用戶的鼠標空閒時，我想隱藏它們。然後，如果用戶移動鼠標，我希望它們重新出現。如何防止div在隱藏時觸發父級的mousemove

我的問題是，當控件消失時，它們會在父級上觸發mousemove事件。這會導致控件重新出現。

這裏是JS代碼：

(function($) { 
    var timer = null; 
    $('.outer').mousemove(function() { 
    $('.inner').fadeIn('slow'); 

    if (timer) { 
     window.clearInterval(timer); 
    } 
    timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow'); 
    }, 3000); 
    }); 
})(jQuery);

這裏是一個小提琴：https://jsfiddle.net/8oduhs96/

眼下小提琴的結構看起來更像我的項目。我沒有更改標記的靈活性，所以JS和/或CSS解決方案是首選。

您可以取消註釋CSS的較低塊以查看問題只發生在鼠標位於藍色區域時。

來源

2017-02-03 Sean

我想嘗試添加和刪除基於菜單是否隱藏的父類。然後，如果父母具有該類別，則基於懸停。 – eeetee

我不明白這個問題，當你不移動鼠標時，菜單消失了，是不是你所需要的？另外，考慮一個像這樣的addClass/removeClass和CSS轉換https://jsfiddle.net/8oduhs96/7/ – romuleald

@romuleald問題在於菜單在不移動鼠標的情況下立即重新出現。你的小提琴沒有這個問題，因爲菜單沒有完全刪除，它只是字母表。這是IMO比隱藏後使用超時更可接受。如果你輸入一個答案，我會接受它。 – Sean

使用CSS和不透明度/可見性隱藏你的元素，所以不會觸發DOM的修改（從jQuery的fadeIn/fadeOut一個display:none/block;效果）

https://jsfiddle.net/8oduhs96/8/

來源

2017-02-03 21:19:48 romuleald

這很棒，但它消除了淡出效果。是否有一個快速的CSS修復？ – Sean

增加.inner中轉換屬性的值。查看MDN文章以瞭解轉換的力量https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions – romuleald

With轉換：https：//jsfiddle.net/8oduhs96/9/ – nikoskip

您可以添加檢查以查看元素是否可見。

(function($) { 
    var timer = null; 
    $('.outer').mousemove(function() { 
    console.log('MouseOver'); 
    if($('.inner').is(':visible')){ 
     console.log('Triggered'); 
     $('.inner').fadeIn('slow'); 

     if (timer) { 
     window.clearInterval(timer); 
     } 
     timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow'); 
     }, 3000); 
    } 
    }); 
})(jQuery);

來源

2017-02-03 19:58:18 Michael

我在小提琴中進行了測試，這不允許.inner再次顯示。我會更新這個問題來澄清。 – Sean

你可以在可見檢查中添加一個else語句，這樣如果它不可見，它將會淡入。我建議你也設置超時時間，以便它不會立即顯示並觸發它再次隱藏。 – Michael

正如Michael在對他的回答發表評論時所建議的那樣，我從UX的角度使用超時解決了這個問題。

我仍然更喜歡一個解決方案，不涉及超時，如果其他人知道如何。

(function($) { 
    var timer = null; 

    function setupOuter() { 
    $('.outer').mousemove(function() { 
     $('.inner').fadeIn('slow'); 
     $('.outer').off('mousemove'); 
    }); 
    } 
    setupOuter(); 

    $('.inner').mousemove(function() { 
    if (timer) { 
     window.clearInterval(timer); 
    } 
    timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow', function() { 
     window.setTimeout(setupOuter, 500); 
     }); 
    }, 3000); 
    }); 
})(jQuery);

來源

2017-02-03 20:20:43 Sean

如何防止div在隱藏時觸發父級的mousemove

回答

相關問題