VueJS父mouseover事件掩盖子mouseover事件
VueJS父mouseover事件掩盖子mouseover事件
提问于 2018-03-05 20:17:09
我正在使用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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-05 20:34:56
此外，可以使用事件修饰符将其缩写为@mouseover.stop="childHover"。
Stack Overflow用户
发布于 2018-03-05 20:25:17
<div id='app'>
<div id='parent' @mouseover="parentHover">
<div id='child' @mouseover="childHover">
</div>
</div>
{{ hoverTarget }}
</div>这是因为事件冒泡主体造成的。
当一个事件发生在一个元素上时，它首先在它上运行处理程序，然后在它的父元素上运行，然后在其他祖先上一直运行。
这意味着childHover处理程序将被执行，并且在执行之后，parentHover将立即被执行，使子执行不可见。
要解决您的问题，您可以使用事件的event.stopPropagation()方法，以确保从子到父之间不会发生冒泡。
var vm = new Vue({
el: '#app',
data: {
hoverTarget: 'none'
},
methods: {
parentHover: function() {
this.hoverTarget = 'parent'
},
childHover: function(event) {
event.stopPropagation()
this.hoverTarget = 'child'
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49118743
复制相关文章
相似问题
腾讯云开发者
