event.stopPropagation() 不起作用答案

【问题标题】：event.stopPropagation() doesnt workevent.stopPropagation() 不起作用
【发布时间】：2016-09-18 04:43:46
【问题描述】：

我有一些彼此靠近的按钮。当悬停在他们身上时，他们的孩子会弹出，当悬停完成时，效果就消失了。

问题在于 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)});

【问题讨论】：

标签： javascript css hover stoppropagation

【解决方案1】：

忘记 event.stopPropagation() 并改用pointer-events CSS 属性：它能够将任何元素设置为对鼠标交互透明。仅在<a> 未悬停时在“弹出”元素上使用它：

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

我还在<a> 悬停时添加了一个不可见的伪元素，只是为了在您的鼠标光标移到“弹出”元素上并且您希望它保持可见时创建指向“弹出”元素的链接：

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

这是您编辑的 Fiddle 的链接：https://jsfiddle.net/m6ephL81/

【讨论】：