CODEWITHSUNDEEP
javascriptcsshoverstoppropagation
zEn feeLo
zEn feeLo

Reputation: 1978

event.stopPropagation() doesnt work

I have some buttons close to eachother. when hovering on them their child pop out and when hover done the effect is gone.

The problem is with css (:hover) I cant prevent jittery state. so I try to use mouseenter and mouseleave and use stopPropagation function to prevent jittery state when unwanted hover on child trigger parent eventListener.

but it doesnt work, I checked the other answers but dont know what is my problem

here is the link of my work full code on >> https://jsfiddle.net/fe3m74xn/

var el = document.querySelectorAll('#slideShow_control a');

    var slideShow_control_hoverIn = function(e, i) {
        e.stopPropagation();
        var bool = e.target.classList.contains('hover');
        el.forEach.call(el, function(e){e.classList.remove('hover')});
        if(!bool) {
            e.target.classList.toggle('hover');
        }
    };


    var slideShow_control_hoverOut = function(e, i) {
        e.stopPropagation();
        el.forEach.call(el, function(e){e.classList.remove('hover')});
    };
    el.forEach.call(el,function(e){e.addEventListener('mouseenter',slideShow_control_hoverIn,false)});
    el.forEach.call(el,function(e){e.addEventListener('mouseleave',slideShow_control_hoverOut,false)});

Upvotes: 1

Views: 574

Answers (1)

Motla
Motla

Reputation: 1232

Forget about event.stopPropagation() and use the pointer-events CSS property instead : it's able to set any element transparent to mouse interactions. Only use it on the "pop out" element when the <a> is not hovered:

#slideShow_control figure {
    /* ... */
    pointer-events: none;
}
#slideShow_control a:hover figure {
    /* ... */
    pointer-events: all;
}

I also added an invisible pseudo-element to the <a> when it's hovered, just to make the link to the "pop out" element if your mouse cursor goes up over it and you want it to stay visible:

#slideShow_control > a:hover:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: -20px;
    /* background-color: red; */ /* uncomment to understand */
}

Here is the link to your edited Fiddle: https://jsfiddle.net/m6ephL81/

Upvotes: 1

Related Questions