我正在使用VueJS，并试图在两个元素上触发mouseover事件，一个是另一个的子元素。
无法激发子鼠标悬停事件。似乎父元素正在“覆盖”子div，并且只有父mouseover事件被注册。
var vm = new Vue({
el: '#app',
data: {
hoverTarget: 'none'
},
methods: {
parentHover: function() {
this.hoverTarget = 'parent'
},
childHover: function() {
this.hoverTarget = 'child'
}
}
});#parent {
width: 100px;
height: 100px;
background: #000000;
}
#child {
width: 50px;
height: 50px;
background: #FFFFFF;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id='app'>
<div id='parent' @mouseover="parentHover">
<div id='child' @mouseover="childHover">
</div>
</div>
{{ hoverTarget }}
</div>
3条答案
按热度按时间nc1teljy1#
此外，您可以使用事件修饰符将其缩写为
@mouseover.stop="childHover"。eufgjt7s2#
发生这种情况是因为事件冒泡主体
当一个事件发生在一个元素上时，它首先在该元素上运行处理程序，然后在其父元素上运行处理程序，然后在其他祖先元素上运行处理程序。
这意味着
childHover处理程序将被执行，并且紧接着parentHover将被执行，从而使子执行不可见。为了解决这个问题，你可以使用事件的
event.stopPropagation()方法来确保从子节点到父节点没有冒泡。aor9mmx13#
CSS
:has有很好的支持（没有Firefox，但其他地方都很好，截至2-23）。:has允许您将满足关于其子元素的任意条件的元素作为目标。