jQuery - how to use stopPropagation()
-
18-09-2019 - |
Question
I've done this before, but I'm having trouble getting this to work...
I need the following jquery to have a .stopPropagation function, so the animation won't go crazy if the user hovers over three elements too quickly!
$(function () {
var tabContainers = $('div.subMenu > div');
tabContainers.hide();
$('.mainMenuDiv a').hover(
function (e) {
tabContainers.filter(this.hash).slideDown();
e.stop();
},
function(e){
tabContainers.filter(this.hash).slideUp();
e.stopPropagation();
});
});
Solution
Sounds like you are looking for the stop
function that cancels any incomplete animations.
$('.mainMenuDiv a').hover(
function (e) {
tabContainers.filter(this.hash).stop().slideDown();
},
function(e){
tabContainers.filter(this.hash).stop().slideUp();
}
);
or if you'd like any in-progress animation(s) to be "rolled back" try:
$('.mainMenuDiv a').hover(
function (e) {
tabContainers.filter(this.hash).stop(true, true).slideDown();
},
function(e){
tabContainers.filter(this.hash).stop(true, true).slideUp();
}
);
Check out the docs for more info.
OTHER TIPS
Be carefull when using stopPropagation() and stopImmediatePropagation() as if they were the same thing:
The Event.stopPropagation() method prevents the event object from moving on to the next node, but only after any other event listeners on the current node are allowed to execute.
The Event.stopImmediatePropagation() method also prevents the event object from moving on to the next node, but does not allow any other event listeners on the current node to execute.
$(function () {
var tabContainers = $('div.subMenu > div');
tabContainers.hide();
$('.mainMenuDiv a').hover(function () {
tabContainers.filter(this.hash).dequeue().slideDown();
},function () {
tabContainers.filter(this.hash).dequeue().slideUp();
});
});
Hope that this helps. ;) Events “bubble up” from the child element to all its parents, and you would event.stopPropragation();
or event.stopImmediatePropagation()
. However to stop animation you dequeue()
.
I could be wrong, but this might work:
$(function () {
var tabContainers = $('div.subMenu > div');
tabContainers.hide();
$('.mainMenuDiv a').hover(function() {
tabContainers.filter(this.hash).stop().slideDown();
},function() {
tabContainers.filter(this.hash).stop().slideUp();
});
});