VueJS 父鼠标悬停事件屏蔽子鼠标悬停事件

Question

我正在使用 VueJS 并尝试在两个元素上触发鼠标悬停事件，一个是另一个的子元素。

我无法触发子鼠标悬停事件。父元素似乎"覆盖"了子div，并且只注册了父鼠标悬停事件。

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>

Answer 1

此外，您可以使用事件修饰符将其缩写为 @mouseover.stop="childHover" 。

Answer 2

 <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'
    }
  }
});

Answer 3

CSS :has有很好的支持(没有 Firefox，但其他地方都很好，截至 2-23 年(。

:has允许您定位满足有关其自身子级的任何任意条件的元素。

#parent:not(:has(#child:hover)):hover { ... }