Javascript event.stopPropagation()不起作用
我有几个钮扣紧挨着。当鼠标悬停在它们上面时,它们的孩子会弹出,当鼠标悬停完成时,效果就消失了 问题在于css(:hover)我无法阻止抖动状态。所以我尝试使用mouseenter和mouseleave,并使用stopPropagation函数来防止不必要的悬停在子触发器父eventListener上时出现抖动状态 但它不起作用,我检查了其他答案,但不知道我的问题是什么 这是我工作的链接 关于>>的完整代码Javascript event.stopPropagation()不起作用,javascript,css,hover,stoppropagation,Javascript,Css,Hover,Stoppropagation,我有几个钮扣紧挨着。当鼠标悬停在它们上面时,它们的孩子会弹出,当鼠标悬停完成时,效果就消失了 问题在于css(:hover)我无法阻止抖动状态。所以我尝试使用mouseenter和mouseleave,并使用stopPropagation函数来防止不必要的悬停在子触发器父eventListener上时出现抖动状态 但它不起作用,我检查了其他答案,但不知道我的问题是什么 这是我工作的链接 关于>>的完整代码 忘记event.stopPropagation()并改用CSS属性:它能够将任何元素设置为
忘记event.stopPropagation()并改用CSS属性:它能够将任何元素设置为对鼠标交互透明。 仅当
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)});
#slideShow_control figure {
/* ... */
pointer-events: none;
}
#slideShow_control a:hover figure {
/* ... */
pointer-events: all;
}
#slideShow_control > a:hover:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
left: 0;
top: -20px;
/* background-color: red; */ /* uncomment to understand */
}