我有一些按钮彼此靠近。当悬停在他们身上时,他们的 child 会弹出,当悬停完成时,效果就消失了。
问题出在 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)});
最佳答案
忘记 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/
关于javascript - event.stopPropagation() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39550651/