event.stopPropagation()不起作用

时间:2016-09-17 19:03:23

标签: javascript css hover stoppropagation

我有一些按钮彼此靠近。当他们徘徊在他们的孩子弹出时,当悬停完成时,效果消失了。

问题在于css(:hover)我无法防止紧张状态。所以我尝试使用mouseenter和mouseleave并使用stopPropagation函数来防止不必要的悬停在子触发器父eventListener上时的抖动状态。

但它不起作用,我检查了其他答案,但不知道我的问题是什么

这是我工作的链接 >>上的完整代码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)});

1 个答案:

答案 0 :(得分:0)

忘记event.stopPropagation()并使用pointer-events CSS属性:它能够将任何元素设置为对鼠标交互透明。 只能在&#34;弹出&#34; <a>未悬停时的元素:

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

我还在<a>悬停时添加了一个不可见的伪元素,只是为了链接到&#34;弹出&#34;如果您的鼠标光标在它上方并且您希望它保持可见,则该元素:

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

以下是您编辑的小提琴的链接:https://jsfiddle.net/m6ephL81/